一般的投影效果，尤其通過CSS實現(xiàn)的投影效果（無論是CSS3，還是IE濾鏡），都是直來直往的。紙張是有卷角的，其投影就是曲面的，如何使用CSS模擬出紙張的卷邊曲線投影效果就是本篇的內(nèi)容了。
首先，曲線投影的終效果其實是多投影重疊的效果：一點點傾斜的投影重疊一個直直的投影。
一般的直來直往的投影顯然是使用box-shadow屬性就可以搞定了。至于那個傾斜的投影，如果是現(xiàn)代瀏覽器，則需要就是CSS3變換屬性transform（具體參見之前的“CSS3 Transitions, Transforms和Animation使用簡介與應(yīng)用展示”一文）。首先是傾斜，5度左右的樣子，然后讓其在主投影的后面顯示就可以了。然后，單單只有傾斜是不夠的，因為有一個腳會從一側(cè)露出來，這很好理解。假設(shè)兩個矩形一樣大，位置完全重疊，如果發(fā)生旋轉(zhuǎn)，則必定有邊角不重合而露出來。即使矩形尺寸不一樣，只要其以一個公共的邊角旋轉(zhuǎn)，至少會有兩個角露出來，而實際上我們只需要一個，也就是斜邊投影的哪個角。那么這個問題該如何解決呢，也很簡單，同樣是transform，不過這回不是旋轉(zhuǎn)，而是拉伸(skew)，將規(guī)整的矩形拉伸成平行四邊形，可避免旋轉(zhuǎn)的時候多余的角露出來。
對于不支持CSS3的IE瀏覽器，按照上面的原理，理論上也是可以模擬出曲線投影效果的。因為IE下的投影效果可以使用投影濾鏡（效果生硬不推薦）實現(xiàn)，或是模糊濾鏡實現(xiàn)（推薦），至于旋轉(zhuǎn)也有旋轉(zhuǎn)濾鏡。但是，就性能和成本而言，是否應(yīng)該使用很值得商榷。
在現(xiàn)代瀏覽器下，一層標簽就可以了。首先，如下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)建斜邊投影。
最后實現(xiàn)的效果就是下面這張圖的效果：
您可以狠狠地點擊這里：紙張的曲線投影效果demo
如果您使用的是IE瀏覽器，可能也會看到點效果，大致如下：
這是我使用IE濾鏡折騰出來的效果。由于IE6~7不支持before、after，所以，IE下投影所在標簽的定位我是使用js輔助實現(xiàn)的。所以花的功夫不少，但是最后的效果還是不及Firefox以及Chrome來的逼真。
由于IE濾鏡方法不是本文重點，自己也不推薦這種做法，所以這就就不展示IE的實現(xiàn)了。您可以查看頁面源代碼。
友情提示
這里的斜邊投影使用的是負值z-index定位到本體陰影的后面的。由于使用的是z-index負值，所以，請務(wù)必保證當前投影元素的所有父標簽均沒有背景圖片或背景色（body標簽除外），否則，斜邊投影是看不到的。
所說目前而言，本文實例效果是沒有多少實際應(yīng)用價值的。但是，其中實現(xiàn)的原理，關(guān)于content的使用，以及對z-index的一些認識，熟悉CSS3的一些屬性還是頗有幫助的?？赡懿恍枰嗌倌?，本文的例子就會會很基本很常用的入門實例了，期待那一天的到來。
原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
