中规中矩的效果

所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下：

您可以狠狠地点击这里：中规中矩纸张效果demo

这里纸张本身的效果没有什么说头的，就是个CSS3的box-shadow投影效果而已，相关代码如下：

-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做旋转效果；元素使用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伪类，国外最近的些教程，技术点等经常见到此玩意。我个人感觉有跟风之嫌，就像是狂热的经济泡沫，不需要太久，大家会冷静下来重新审视这些曾经上手简单，自我感觉不错的方法。由于目前IE6/7不支持before/after类，所以，某种意义上来说，伪类的使用少了些兼顾IE下显示的烦恼。

关于transform属性。