Css中box-shadow属性实现曲线投影纸张效果

2014年6月4日 MK CSS 2 阅读 3857次

一般的投影效果，尤其通过CSS实现的投影效果（无论是CSS3，还是IE滤镜），都是直来直往的。纸张是有卷角的，其投影就是曲面的。

首先，曲线投影的终效果其实是多投影重叠的效果：一点点倾斜的投影重叠一个直直的投影。
一般的直来直往的投影显然是使用box-shadow属性就可以搞定了。

然后我们看效果：

下面是代码：

代码预览

<div class="curved_box"></div> <style type="text/css"> .curved_box { display: inline-block; *display: inline; width: 200px; height: 248px; 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; } .curved_box:before { -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); left: 15px; } .curved_box:after { -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); right: 15px; } .curved_box:before, .curved_box:after { width: 70%; height: 55%; 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; } </style>

IE6是不支持的before和after的。需要写js来实现。

box-shadow, 曲线投影, 纸张

PHP获取随机数详解及总是生成一样随机数的解决办法 禁止WordPress后台加载谷歌字体的两种方法