CSS3下实现边框阴影效果（下）-翘边阴影效果
接着我们来实现翘边阴影效果
.box{
width: 980px;
height: auto;
overflow: hidden;
margin: 20px auto;
}
.box li{
width: 300px;
height:210px ;
float: left;
margin: 20px 10px;
border: solid 2px #efefef;
background:#ffffff;
box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
-ms-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
}
.box li img{
display: block;
width: 290px;
height: 200px;
margin: 5px;
}
通过定义上述样式，我们可以看到图⽚周围⽣成了⼀个宽为2px的透明边框，并且向内⽣成了淡淡的阴影效果，接着和⽣成曲线阴影效果⼀样，我们使⽤before和after这两个伪元素选择器⽣成阴影图形并将其覆盖在主图形下⾯，因此我们需要在li样式内添加position属性的定义：
position:relative;
我们先来定义插⼊在主图形前的图像，为了⽣成翘边，我们需要⽣成⼀个平⾏四边形或者
.box li:before{
content: '';
position: absolute;
width: 90%;
height: 80%;
left: 20px;
bottom: 8px;
background:#f60;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
box shadow怎么设置-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
transform:skew(-12deg)rotate(-4deg);
-o-transform:skew(-12deg)rotate(-4deg);
-webkit-transform:skew(-12deg)rotate(-4deg);
-moz-transform:skew(-12deg)rotate(-4deg);
-ms-transform:skew(-12deg)rotate(-4deg);
}
为了⽅便观察，我们可以将background设置为#f60，在这⾥width和height这两个属性决不能设置得等同于主图像的宽⾼，因为这样⽣成的平⾏四边形宽⾼有可能⼤于主图形，所以我们将这两个属性设置得稍⼩⼀掉，使其保证内在住图像之内；此外，为了⽣成平⾏四边形，我们使⽤到了transform：scale，这个属性，使⽤的同时需要注意到浏览器内核兼容性问题，这⾥不赘述
最后将新⽣成的图像隐藏在住图像之下，将background的属性值改会transparent，设置z-index的属性：
.box li:before{
background:transparent;
z-index:-1;
}
修改完后，我们便可以看到⼀边的翘边的阴影效果，我们可以在主图像后插⼊另⼀个图形，实现另⼀边的翘边效果：
.box li:after{
content: '';
position: absolute;
width: 90%;
height: 80%;
right: 20px;
bottom: 8px;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
ttransform:skew(12deg)rotate(4deg);
-o-transform:skew(12deg)rotate(4deg);
-webkit-transform:skew(12deg)rotate(4deg);
-moz-transform:skew(12deg)rotate(4deg);
-ms-transform:skew(12deg)rotate(4deg);
z-index: -2;
}
到这⾥我们就制作完了曲线和翘边的阴影效果，感谢各位⼩伙伴来观！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。