不容错过的20段CSS代码

Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。

1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。

 1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, PRe, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 2   margin: 0; 3   padding: 0; 4   border: 0; 5   font-size: 100%; 6   font: inherit; 7   vertical-align: baseline; 8   outline: none; 9   -webkit-box-sizing: border-box;10   -moz-box-sizing: border-box;11   box-sizing: border-box;12 }13 html { height: 101%; }14 body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }15 16 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }17 ol, ul { list-style: none; }18 19 blockquote, q { quotes: none; }20 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }21 strong { font-weight: bold; } 22 23 table { border-collapse: collapse; border-spacing: 0; }24 img { border: 0; max-width: 100%; }25 26 p { font-size: 1.2em; line-height: 1.0em; color: #333; }

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

1 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }2 .clearfix { display: inline-block; }3  <font></font>  4 html[xmlns] .clearfix { display: block; }5 * html .clearfix { height: 1%; }  

3.升级版的Clearfix

在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。

1 .clearfix:before, .container:after { content: ""; display: table; }<font></font>  2 .clearfix:after { clear: both; }3 /* IE 6/7 */4 .clearfix { zoom: 1; }  

4. Cross-Browser Transparency

CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

1 .transparent {2     filter: alpha(opacity=50); /* internet explorer */3     -khtml-opacity: 0.5;      /* khtml, old safari */4     -moz-opacity: 0.5;       /* mozilla, netscape */5     opacity: 0.5;           /* fx, safari, Opera */6 }  

源码地址：http://perishablepress.com/cross-browser-transparency-via-css/

5. CSS Blockquote模板

这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。

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;}  

查看源码：http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！

 1 #container { 2     -webkit-border-radius: 4px 3px 6px 10px; 3     -moz-border-radius: 4px 3px 6px 10px; 4     -o-border-radius: 4px 3px 6px 10px;   5     border-radius: 4px 3px 6px 10px; 6 } 7 /* alternative syntax broken into each line */ 8 #container { 9     -webkit-border-top-left-radius: 4px;10     -webkit-border-top-rightright-radius: 3px;11     -webkit-border-bottom-rightright-radius: 6px;12     -webkit-border-bottom-left-radius: 10px;13     -moz-border-radius-topleft: 4px;14     -moz-border-radius-topright: 3px;15     -moz-border-radius-bottomright: 6px;16     -moz-border-radius-bottomleft: 10px;17 }  

7. 一般媒体查询

这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

 1 /* Smartphones (portrait and landscape) ----------- */ 2 @media only screen   3 and (min-device-width : 320px) and (max-device-width : 480px) {   4   /* Styles */  5 }   6 /* Smartphones (landscape) ----------- */ 7 @media only screen and (min-width : 321px) { 8   /* Styles */ 9 }  10 /* Smartphones (portrait) ----------- */11 @media only screen and (max-width : 320px) {12   /* Styles */  13 } 14 /* iPads (portrait and landscape) ----------- */15 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {16   /* Styles */  17 } 18 <font></font>  19 /* iPads (landscape) ----------- */20 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {21   /* Styles */22 } 23 /* iPads (portrait) ----------- */24 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 25   /* Styles */26 }   27 /* Desktops and laptops ----------- */28 @media only screen and (min-width : 1224px) {29   /* Styles */30 }31 /* Large screens ----------- */32 @media only screen and (min-width : 1824px) {33   /* Styles */34 } 35 /* iPhone 4 ----------- */36 @media only screen and