中規(guī)中矩的效果

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

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

這里紙張本身的效果沒有什么說頭的，就是個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);

反而是上面的膠帶紙效果有點說頭，這些微微傾斜的膠帶是CSS寫出來的，大部分效果源自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偽類，國外最近的些教程，技術(shù)點等經(jīng)常見到此玩意。我個人感覺有跟風之嫌，就像是狂熱的經(jīng)濟泡沫，不需要太久，大家會冷靜下來重新審視這些曾經(jīng)上手簡單，自我感覺不錯的方法。由于目前IE6/7不支持before/after類，所以，某種意義上來說，偽類的使用少了些兼顧IE下顯示的煩惱。

關(guān)于transform屬性。