中规中矩的效果
所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下：
您可以狠狠地点击这里：中规中矩纸张效果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属性。
