一、簡(jiǎn)單的前言

一般的投影效果，尤其通過CSS實(shí)現(xiàn)的投影效果（無論是CSS3，還是IE濾鏡），都是直來直往的。紙張是有卷角的，其投影就是曲面的，如何使用CSS模擬出紙張的卷邊曲線投影效果就是本篇的內(nèi)容了。

二、實(shí)現(xiàn)原理簡(jiǎn)介

首先，曲線投影的終效果其實(shí)是多投影重疊的效果：一點(diǎn)點(diǎn)傾斜的投影重疊一個(gè)直直的投影。
一般的直來直往的投影顯然是使用box-shadow屬性就可以搞定了。至于那個(gè)傾斜的投影，如果是現(xiàn)代瀏覽器，則需要就是CSS3變換屬性transform（具體參見之前的“CSS3 Transitions, Transforms和Animation使用簡(jiǎn)介與應(yīng)用展示”一文）。首先是傾斜，5度左右的樣子，然后讓其在主投影的后面顯示就可以了。然后，單單只有傾斜是不夠的，因?yàn)橛幸粋€(gè)腳會(huì)從一側(cè)露出來，這很好理解。假設(shè)兩個(gè)矩形一樣大，位置完全重疊，如果發(fā)生旋轉(zhuǎn)，則必定有邊角不重合而露出來。即使矩形尺寸不一樣，只要其以一個(gè)公共的邊角旋轉(zhuǎn)，至少會(huì)有兩個(gè)角露出來，而實(shí)際上我們只需要一個(gè)，也就是斜邊投影的哪個(gè)角。那么這個(gè)問題該如何解決呢，也很簡(jiǎn)單，同樣是transform，不過這回不是旋轉(zhuǎn)，而是拉伸(skew)，將規(guī)整的矩形拉伸成平行四邊形，可避免旋轉(zhuǎn)的時(shí)候多余的角露出來。

對(duì)于不支持CSS3的IE瀏覽器，按照上面的原理，理論上也是可以模擬出曲線投影效果的。因?yàn)镮E下的投影效果可以使用投影濾鏡（效果生硬不推薦）實(shí)現(xiàn)，或是模糊濾鏡實(shí)現(xiàn)（推薦），至于旋轉(zhuǎn)也有旋轉(zhuǎn)濾鏡。但是，就性能和成本而言，是否應(yīng)該使用很值得商榷。

三、具體實(shí)現(xiàn)

在現(xiàn)代瀏覽器下，一層標(biāo)簽就可以了。首先，如下HTML：

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

相關(guān)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內(nèi)容生成技術(shù)，創(chuàng)建斜邊投影。

最后實(shí)現(xiàn)的效果就是下面這張圖的效果：

您可以狠狠地點(diǎn)擊這里：紙張的曲線投影效果demo

如果您使用的是IE瀏覽器，可能也會(huì)看到點(diǎn)效果，大致如下：

這是我使用IE濾鏡折騰出來的效果。由于IE6~7不支持before、after，所以，IE下投影所在標(biāo)簽的定位我是使用js輔助實(shí)現(xiàn)的。所以花的功夫不少，但是最后的效果還是不及Firefox以及Chrome來的逼真。

由于IE濾鏡方法不是本文重點(diǎn)，自己也不推薦這種做法，所以這就就不展示IE的實(shí)現(xiàn)了。您可以查看頁(yè)面源代碼。

友情提示
這里的斜邊投影使用的是負(fù)值z(mì)-index定位到本體陰影的后面的。由于使用的是z-index負(fù)值，所以，請(qǐng)務(wù)必保證當(dāng)前投影元素的所有父標(biāo)簽均沒有背景圖片或背景色（body標(biāo)簽除外），否則，斜邊投影是看不到的。

四、快速結(jié)語(yǔ)

所說目前而言，本文實(shí)例效果是沒有多少實(shí)際應(yīng)用價(jià)值的。但是，其中實(shí)現(xiàn)的原理，關(guān)于content的使用，以及對(duì)z-index的一些認(rèn)識(shí)，熟悉CSS3的一些屬性還是頗有幫助的。可能不需要多少年，本文的例子就會(huì)會(huì)很基本很常用的入門實(shí)例了，期待那一天的到來。

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來自張?chǎng)涡?鑫空間-鑫生活[http://www.]