18. CSS3 Opacity

使用opacity属性，帮助你透明看到元素，你可以创建一个分层的纹理背景

div.L1 { background:#036; opacity:0.2; height:20px; }  
div.L2 { background:#036; opacity:0.4; height:20px; }  
div.L3 { background:#036; opacity:0.6; height:20px; }  
div.L4 { background:#036; opacity:0.8; height:20px; }  
div.L5 { background:#036; opacity:1.0; height:20px; } 

19. Highlight links that open in a new window

这段代码允许你通过显示不同的样式清楚地分辨新窗口/标签页打开的link。

a[target="_blank"]:before,  
a[target="new"]:before {  
margin:0 5px 0 0;  
padding:1px;  
outline:1px solid #333;  
color:#333;  
background:#ff9;  
font:12px "Zapf Dingbats";  
content: "\279C";  
} 

20. The New Bulletproof @Font-Face Syntax

跨浏览器的CSS代码片断，帮助你定义font face

@font-face {  
    font-family: 'MyFontFamily';  
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),  
         url('myfont-webfont.woff') format('woff'),  
         url('myfont-webfont.ttf')  format('truetype'),  
         url('myfont-webfont.svg#svgFontName') format('svg');  
    } 

21. Flip an Image

翻转图片的CSS代码片断。特别适合你翻转图标

img {  
        -moz-transform: scaleX(-1);  
        -o-transform: scaleX(-1);  
        -webkit-transform: scaleX(-1);  
        transform: scaleX(-1);  
        filter: FlipH;  
        -ms-filter: "FlipH";  
} 

22. Email Link With An Image

快速的方法自动添加一个电子邮件图片到你的email链接

a[href^="mailto:"] {  
     background: url(images/email.png) no-repeat right top;  
     padding-right:10px;  
} 

23. Beautiful Blockquotes

美化你的引用

blockquote {  
     background:#f9f9f9;  
     border-left:10px solid #ccc;  
     margin:1.5em 10px;  
     padding:.5em 10px;  
     quotes:"\201C""\201D""\2018""\2019";  
}  
blockquote:before {  
     color:#ccc;  
     content:open-quote;  
     font-size:4em;  
     line-height:.1em;  
     margin-right:.25em;  
     vertical-align:-.4em;  
}  
blockquote p {  
     display:inline;  
} 

(责任编辑：ken)