CSS特殊样式（六） box-shadow实现纸张的曲线投影效果
1、box-shadow属性，存在兼容性问题使用时需：
-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;
2、此事例并不常用，主要用于学习和熟悉CSS3一、简单的前言
一般的投影效果，尤其通过CSS实现的投影效果（无论是CSS3，还是IE滤镜），都是直来直往的。纸张是有卷角的，其投影就是曲面的，如何使用CSS模拟出纸张的卷边曲线投影效果就是本篇的内容了。
二、实现原理简介
首先，曲线投影的终效果其实是多投影重叠的效果：一点点倾斜的投影重叠一个直直的投影。
一般的直来直往的投影显然是使用box-shadow属性就可以搞定了。至于那个倾斜的投影，如果是现代浏览器，则需要就是CSS3变换属性transform（具体参见之前的“CSS3 Transitions, Transforms和Animation使用简介与应用展示”一文）。首先是倾斜，5度左右的样子，然后让其在主投影的后面显示就可以了。然后，单单只有倾斜是不够的，因为有一个脚会从一侧露出来，这很好理解。假设两个矩形一样大，位置完全重叠，如果发生旋转，则必定有边角不重合而露出来。即使矩形尺寸不一样，只要其以一个公共的边角旋转，至少会有两个角露出来，而实际上我们只需要一个，也就是斜边投影的哪个角。那么这个问题该如何解决呢，也很简单，同样是transform，不过这回不是旋转，而是拉伸(skew)，将规整的矩形拉伸成平行四边形，可避免旋转的时候多余的角露出来。
对于不支持CSS3的IE浏览器，按照上面的原理，理论上也是可以模拟出曲线投影效果的。因为IE下的投影效果可以使用投影滤镜（效果生硬不推荐）实现，或是模糊滤镜实现（推荐），至于旋转也有旋转滤镜。但是，就性能和成本而言，是否应该使用很值得商榷。
三、具体实现
在现代浏览器下，一层标签就可以了。首先，如下HTML：
相关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;
}
使用了content内容生成技术，创建斜边投影。
最后实现的效果就是下面这张图的效果：
您可以狠狠地点击这里：纸张的曲线投影效果demo
如果您使用的是IE浏览器，可能也会看到点效果，大致如下：
这是我使用IE滤镜折腾出来的效果。由于IE6~7不支持before、after，所以，IE下投影所在标签的定位我是使用js辅助实现的。所以花的功夫不少，但是最后的效果还是不及Firefox以及Chrome来的逼真。
由于IE滤镜方法不是本文重点，自己也不推荐这种做法，所以这就就不展示IE的实现了。您可以查看页面源代码。
友情提示
这里的斜边投影使用的是负值z-index定位到本体阴影的后面的。由于使用的是z-index负值，所以，请务必保证当前投影元素的所有父标签均没有背景图片或背景色（body标签除外），否则，斜边投影是看不到的。
四、快速结语
所说目前而言，本文实例效果是没有多少实际应用价值的。但是，其中实现的原理，关于content的使用，以及对z-index的一些认识，熟悉CSS3的一些属性还是颇有帮助的。可能不需要多少年，本文的例子就会会很基本很常用的入门实例了，期待那一天的到来。
参考页面：Pure CSS3 box-shadow page curl effect
CSS实现跨浏览器兼容性的盒阴影效果
CSS实现跨浏览器的box-shadow盒阴影效果(2)
CSS content内容生成技术以及应用
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1322
（本篇完）// 想要打赏？点击这里。有话要说？点击这里。
- CSS实现跨浏览器兼容性的盒阴影效果 (0.503)
- CSS content内容生成技术以及应用 (0.457)
- CSS之before, after伪元素特性表现两则 (0.442)
- CSS content换行技术实现字符animation loading效果 (0.442)
- 几种纯CSS(CSS3)下的纸张效果实现展示 (0.384)
- :after伪类+content内容生成经典应用举例 (0.319)
- 伪类+js实现CSS3 media queries跨界准确判断 (0.319)
- CSS “渐进增强”在web制作中常见应用举例 (0.318)
- CSS3模拟window7炫酷界面效果展示 (0.318)
- PIE使IE支持CSS3圆角盒阴影与渐变渲染 (0.318)
- Safari 3D transform变换z-index层级渲染异常的研究 (RANDOM - 0.055)
标签： :before, after, box-shadow, content, css3, IE滤镜, transform, 盒阴影