11. Vertically Align Text

如果你设置line-height和父元素高度相同，则很容易让文字垂直居中

div { width:100px; height:100px; }  
div p { line-height:100px; } 

12. How to Create 3D Text With CSS3

使用text-shadow属性，你可以只使用CSS3创建3D文字

p.threeD  
{  
    text-shadow:  
        -1px 1px 0 #ddd,  
        -2px 2px 0 #c8c8c8,  
        -3px 3px 0 #ccc,  
        -4px 4px 0 #b8b8b8,  
        -4px 4px 0 #bbb,  
        0px 1px 1px rgba(0,0,0,.4),  
        0px 2px 2px rgba(0,0,0,.3),  
        -1px 3px 3px rgba(0,0,0,.2),  
        -1px 5px 5px rgba(0,0,0,.1),  
        -2px 8px 8px rgba(0,0,0,.1),  
        -2px 13px 13px rgba(0,0,0,.1)  
        ;  
} 

13. Wrapping Long URLs and Text Content with CSS

这段代码将会帮助你使得一行文字不至于太长，会自动根据内容宽度来折行

pre {  
    white-space: pre;           /* CSS 2.0 */ 
    white-space: pre-wrap;      /* CSS 2.1 */ 
    white-space: pre-line;      /* CSS 3.0 */ 
    white-space: -pre-wrap;     /* Opera 4-6 */ 
    white-space: -o-pre-wrap;   /* Opera 7 */ 
    white-space: -moz-pre-wrap; /* Mozilla */ 
    white-space: -hp-pre-wrap;  /* HP Printers */ 
    word-wrap: break-word;      /* IE 5+ */ 
    } 

14. Fancy Ampersand

使得你的"&"符号更加漂亮

.amp {  
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;  
font-style: italic;  
font-weight: normal;  
} 

15. Pull Quotes for Improved Reading

使得你的引用更加明显，将引用浮动到左边或者右边，并且包围内容

.pullquote {  
width: 300px;  
float: right;  
margin: 5px;  
font-family: Georgia, "Times New Roman", Times, serif;  
font: italic bold #ff0000 ; } 

16. Rounded Borders Around Images

使用CSS3可以很容易的生成图片圆角

img {  
-webkit-border-radius: 25px;  
-moz-border-radius: 25px;  
border-radius: 25px;  
} 

17. Image Preloader

图片加载中先加载一个小图片，这样提示用户预加载图片

img  
{  
    background: url(img/preloader.gif) no-repeat 50% 50%;  
} 

(责任编辑：ken)