CSS3书签卷角阴影效果
作者：秋了秋 发表时间：2015年05月01日
css3的出现让网页设计更增添了活生活色，其中可以利用css3的阴影属性制作各种各样别具一格的立体效果，更增添了视觉的美感，比如下图的框架就使用了css3的阴影属性以及伪类做成了下边的边角微微翘起的效果，看上去很具有立体效果，比如说要使一个id为dew的框架具备这种效果，参考的css3样式为：
#dew{margin:0 auto;width:900px;border: 1px solid #F5F9F6;min-height:600px;position:relative;background:#fff;}
#dew:before, #dew:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;bottom: 15px;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}
#dew:after {
left: auto;right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}
除了这种效果之外，还有更多其它的效果供大家参考：
0
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/342.html