当前位置:秋叶网络博客 前端编程 ◊ CSS3书签卷角阴影效果

CSS3书签卷角阴影效果

作者:秋叶 发表时间:2015年5月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);
}

除了这种效果之外,还有更多其它的效果供大家参考:

代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

转载请保留链接:CSS3书签卷角阴影效果 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/342.html
目录: 前端编程 | 标签: | 5641次阅读