CSS3 box

風之飛雪 2014-03-13

展開全文

一、簡單的前言

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

二、實現(xiàn)原理簡介

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

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

三、具體實現(xiàn)

在現(xiàn)代瀏覽器下，一層標簽就可以了。首先，如下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內容生成技術，創(chuàng)建斜邊投影。

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