用CSS3和HTML5五步打造便签效果（2）

通过该方法，我们得到了一行简单的HTML代码，然后将其放到页面中去。所有浏览器都支持这种网络替换字体的方式。

然后设置便签的内边距（padding），为便签的文字段落换上最新的字体。注意：为了便于阅读，Reenie Beanie字体尽量要设置大一点。

为了让便签在页面中突出显示，需要为它添加投影，这时我们要用到框投影（box-shadow）。为了该样式正确显示，我们必须为每一个想要显示该效果的浏览器添加一行代码（见下面代码所示）。

好在每一个浏览器所需要的狂投影效果不变，语法也就不变：偏移量，阴影扩展量，颜色值。深灰色的不透明度值设为70％。添加新字体之后的便签效果如下图：

第三步：倾斜便签

声明：这一步中将要实现的倾斜效果和下一步的放大效果在Zurb的文章已经做过解释，但是这两个效果并不是在所有浏览器中都生效，因为在写那文章时，他们并没有过时。所以非常感谢他们分享这些技巧。

为了实现倾斜效果，你需要用到CSS3中的transform当中的旋转属性（transform:rotate），在该属性前面添加支持该效果的浏览器前缀：

所有框都向左倾斜6度（即：rotate（-6deg））。接下来，通过CSS3对中的nth-child属性对便签进行随机倾斜。