CSS3 box-shadow实现纸张的曲线投影效果

1、简单的前言

通常的投影效果，尤为经过CSS实现的投影效果（不管是CSS3，仍是IE滤镜），都是直来直往的。纸张是有卷角的，其投影就是曲面的，如何使用CSS模拟出纸张的卷边曲线投影效果就是本篇的内容了。

2、实现原理简介

首先，曲线投影的终效果实际上是多投影重叠的效果：一点点倾斜的投影重叠一个直直的投影。
通常的直来直往的投影显然是使用box-shadow属性就能够搞定了。至于那个倾斜的投影，若是是现代浏览器，则须要就是CSS3变换属性transform（具体参见以前的“CSS3 Transitions, Transforms和Animation使用简介与应用展现” 一文）。首先是倾斜，5度左右的样子，而后让其在主投影的后面显示就能够了。而后，单单只有倾斜是不够的，由于有一个脚会从一侧露出来，这很好理解。假设 两个矩形同样大，位置彻底重叠，若是发生旋转，则一定有边角不重合而露出来。即便矩形尺寸不同，只要其以一个公共的边角旋转，至少会有两个角露出来，而 实际上咱们只须要一个，也就是斜边投影的哪一个角。那么这个问题该如何解决呢，也很简单，一样是transform，不过这回不是旋转，而是拉伸 (skew)，将规整的矩形拉伸成平行四边形，可避免旋转的时候多余的角露出来。

对于不支持CSS3的IE浏览器，按照上面的原理，理论上也是能够模拟出曲线投影效果的。由于IE下的投影效果可使用投影滤镜（效果生硬不推荐）实现，或是模糊滤镜实现（推荐），至于旋转也有旋转滤镜。可是，就性能和成本而言，是否应该使用很值得商榷。

3、具体实现

在现代浏览器下，一层标签就能够了。首先，以下HTML：

<div class="curved_box"></div>

相关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标签除外），不然，斜边投影是看不到的。

4、快速结语

所说目前而言，本文实例效果是没有多少实际应用价值的。可是，其中实现的原理，关于content的使用，以及对z-index的一些认识，熟悉CSS3的一些属性仍是很有帮助的。可能不须要多少年，本文的例子就会会很基本很经常使用的入门实例了，期待那一天的到来。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1322