路上的杨柳依然神彩奕奕的低垂着黄绿色的发丝，好像冬天的降温没带给她们多少伤害。我倒感受到她们内心的寒冷，叶子摸着十分冰冷，也缺少了昔日的水分。冬天的到来，摧残了多少无辜的生命，又演绎了多少生命的童话。
效果：
HTML代码：
XML/HTML Code复制内容到剪贴板
- <divclass="boxshadow"></div>
CSS代码：
CSS Code复制内容到剪贴板
- .box{
- width:300px;
- height:100px;
- background:#ccc;
- border-radius:10px;
- margin:10px;
- }
- .shadow{
- position:relative;
- max-width:270px;
- box-shadow:0px1px4pxrgba(0,0,0,0.3),/*外阴影*/
- 0px0px20pxrgba(0,0,0,0.1)inset;/*内阴影*/
- }
- .shadow::before,
- .shadow::after{
- content:"";
- position:absolute;
- z-index:-1;
- }
- .shadow::before,
- .shadow::after{
- content:"";
- position:absolute;
- z-index:-1;
- bottombottom:15px;
- left:10px;
- width:50%;
- height:20%;
- }
- .shadow::before,
- .shadow::after{
- content:"";
- position:absolute;
- z-index:-1;
- bottombottom:15px;
- left:10px;
- width:50%;
- height:20%;
- box-shadow:015px10pxrgba(0,0,0,0.7);
- transform:rotate(-3deg);
- }
- .shadow::after{
- rightright:10px;
- left:auto;
- transform:rotate(3deg);
- }
伪元素before和after意思是在被选元素的内容前或后 插入内容
本文CSS3如何实现翘边的阴影效果的代码示例到此结束。天才是百分之九十九的汗水加百分之一灵感。小编再次感谢大家对我们的支持！
