CSS3 两底角微卷起的投影效果

2012 - 6 - 8 作者 : Jimco 分类 : HTML/CSS

       在工作中经常遇到各种销魂的卷角、阴影效果,一般我们都是直接切图,效果上当然能和设计图分毫不差,但是这种解决办法总让我心里莫名的不爽!所以,上一个 CSS3 的解决方案:

       先写 html 结构 :

<div class="box"></div>

       再看 CSS :

.box{display:inline-block;*display:inline;width:280px;height:360px;margin:20px;background-color:#fff;border:1px solid #eee;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.06) inset;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;position:relative;*zoom:1;}

.box:before{-webkit-transform:skew(-15deg) rotate(-6deg);-moz-transform:skew(-15deg) rotate(-6deg);transform:skew(-15deg) rotate(-6deg);left:15px;}

.box:after{-webkit-transform:skew(15deg) rotate(6deg);-moz-transform:skew(15deg) rotate(6deg);transform:skew(15deg) rotate(6deg);right:15px;}

.box:before,.box:after{width:75%;height:50%;content:' ';-webkit-box-shadow:0 8px 16px rgba(0,0,0,0.3);-moz-box-shadow:0 8px 16px rgba(0,0,0,0.3);box-shadow:0 8px 16px rgba(0,0,0,0.3);position:absolute;bottom:10px;z-index:-1;}

       最后,上效果图:

点击查看原图

上一篇:心情,需要点Music 下一篇:

6350 人围观 / 6 条评论 ↓快速评论↓

  • 为啥我这边啥也看不到呢?就看到一个突起的框。

    Emily 2014-09-04 11:00 回复

    • @Emily:确认你的浏览器支持 CSS3 效果。

      Jimco 2014-09-05 13:13 回复

  • 话说你这个主题真不错。

    sprityaoyao 2012-06-11 21:21 回复

    • @sprityaoyao:阿狸2后面代码有点糟糕,各种修改啊~~

      Jimco 2012-06-12 10:27 回复

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Jimco

©2013 前端那些事儿 Designed by Jimco

About me|意见反馈