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

一、简单的前言

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

二、实现原理简介

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

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

三、具体实现

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

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