<p class="box-shadow1">曲线阴影</p>
<p class="box-shadow2">翘边阴影</p>
p {
width:500px;
height:100px;
line-height:100px;
text-align:center;
background:#FFF;
}
.box-shadow1 {
position:relative;
box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
box-shadow1:after,.box-shadow1:before {
content:'';
z-index:-1;
position:absolute;
top:50%;
bottom:0;
left:10px;
right:10px;
box-shadow:0 0 20px rgba(0,0,0,0.8);
border-radius:100px/10px;
}
.box-shadow2 {
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
-o-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
}
.box-shadow2:before,.box-shadow2:after {
content:"";
position:absolute;
top:20px;
bottom:22px;
background:transparent;
box-shadow:0 8px 20px rgba(0,0,0,0.7);
z-index:-1;
background:#fff;
}
.box-shadow2:before {
left:22px;
right:12px;
-webkit-transform:skew(-12deg) rotate(-4deg);
-moz-transform:skew(-12deg) rotate(-4deg);
-o-transform:skew(-12deg) rotate(-4deg);
-ms-transform:skew(-12deg) rotate(-4deg);
}
.box-shadow2:after {
left:12px;
right:22px;
-webkit-transform:skew(12deg) rotate(4deg);
-moz-transform:skew(12deg) rotate(4deg);
-o-transform:skew(12deg) rotate(4deg);
-ms-transform:skew(12deg) rotate(4deg);
}
友情提示:本论坛项目均为互联网收录,仅供娱乐,折腾需谨慎!
声明: 遵循 CC 4.0 BY-SA
版权协议,转载请附上原文出处链接及本声明。
我只想带着这与任何人任何事无关的爱情,走去一个人的天荒地老。
I just want to take this love has nothing to do with anybody anything, walked a man of glebe's old.