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