中規(guī)中矩的效果

所謂“中規(guī)中矩的效果”就是加個(gè)投影，貼個(gè)膠帶什么的。效果如下：

您可以狠狠地點(diǎn)擊這里：中規(guī)中矩紙張效果demo

這里紙張本身的效果沒(méi)有什么說(shuō)頭的，就是個(gè)CSS3的box-shadow投影效果而已，相關(guān)代碼如下：

-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

反而是上面的膠帶紙效果有點(diǎn)說(shuō)頭，這些微微傾斜的膠帶是CSS寫(xiě)出來(lái)的，大部分效果源自CSS3，主要有RGBA顯示半透明背景色，box-shadow顯示淡淡的投影，transform做旋轉(zhuǎn)效果；元素使用after偽類生成，完整代碼如下：

.page:after {

    width: 180px;

    height: 30px;

    content: " ";

    margin-left: -90px;

    border: 1px solid rgba(200, 200, 200, .8);

    background: rgba(254, 254, 254, .6);

    -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);

    box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);

    -moz-transform: rotate(-5deg);

    -webkit-transform: rotate(-5deg);

    -o-transform: rotate(-5deg);

    transform: rotate(-5deg);

    position: absolute;

    left: 50%;

    top: -15px;

}

老外似乎很喜歡使用before和after偽類，國(guó)外最近的些教程，技術(shù)點(diǎn)等經(jīng)常見(jiàn)到此玩意。我個(gè)人感覺(jué)有跟風(fēng)之嫌，就像是狂熱的經(jīng)濟(jì)泡沫，不需要太久，大家會(huì)冷靜下來(lái)重新審視這些曾經(jīng)上手簡(jiǎn)單，自我感覺(jué)不錯(cuò)的方法。由于目前IE6/7不支持before/after類，所以，某種意義上來(lái)說(shuō)，偽類的使用少了些兼顧IE下顯示的煩惱。

關(guān)于transform屬性。