效果：
HT ML 代码：
XM L/HTML Code 复制内容到剪贴板
< div &nbs p; class = "box shadow" > </ div >
CSS代码：
CSS Code 复制内容到剪贴板
.box { width : 300px ; h ei ght : 100px ; background : # ccc ; border -radius: 10px ; m arg in : 10px ; } .shadow { pos IT ion : relative ; max-width : 270px ; box -s hadow: 0px 1px 4px rgba(0,0,0,0.3), /* 外阴影*/ 0px 0px 20px rgba(0,0,0,0.1) inset ; /*内阴影*/ } .shadow :: before, .shadow: :after { content : "" ; position : absolute ; z -i ndex :-1; } .shadow::before, .shadow::after { content : "" ; position : absolute ; z-index :-1; bottom bottom : 15px ; left : 10px ; width :50%; height :20%; } .shadow::before, .shadow::after { content : "" ; position : absolute ; z-index :-1; bottom bottom : 15px ; left : 10px ; width :50%; height :20%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3 deg ); } .shadow::after{ right right : 10px ; left : auto ; transform:rotate(3deg); }
伪元素before和after 意思 是在被选元素的内容前或后 插入内容
总结
以上是 为你收集整理的 CSS3实现翘边的阴影效果的代码示例 全部内容，希望文章能够帮你解决 CSS3实现翘边的阴影效果的代码示例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3实现翘边的阴影效果的代码示例的详细内容...