1. 垂直對(duì)齊
如果你之前遇到過這(zhè)個(gè)問題，你就應該知道它是多(duō)麽的(de)煩人(rén)，幸運的(de)是，現在你可(kě)以使用(yòng)CSS3變換來(lái)解決這(zhè)個(gè)問題：
.vc{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}2. 隻在一側或者兩側具有投影(yǐng)
.box-shadow { background-color: #AC92EC; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%;}.box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000;}3. 漸變背景動畫(huà)效果
從CSS3開始，動畫(huà)變得(de)非常的(de)酷了(le)，但是切不可(kě)過分(fēn)的(de)使用(yòng)它們。下(xià)面這(zhè)一技巧巧妙地的(de)移動背景位置，使其看起來(lái)像動畫(huà)一樣：
button { padding: 15px; background-image: linear-gradient(#FC6E51, #FFF); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s;} button:hover { background-position: 0 0;}4. 将文本分(fēn)成多(duō)列
div{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;}5. 表格自動寬度
td { white-space: nowrap;}6. 像出版物(wù)一樣，第一個(gè)字變得(de)大(dà)些
p:first-child::first-letter{ font-family: "papyrus"; font-size: 28px; font-weight: bold;}7. 特定浏覽器的(de)CSS Hacks的(de)完整列表
有時(shí)候解決跨浏覽器兼容性可(kě)能會非常的(de)棘手，但這(zhè)些特定浏覽器的(de)技巧可(kě)能會幫你解決問題。
/***** Selector Hacks ******//* IE6 and below */* html #uno { color: red }/* IE7 */*:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */html>body #tres { color: red }/* IE8, FF, Saf, Opera (Everything but IE 6,7) */html>/**/body #cuatro { color: red }/* Opera 9.27 and below, safari 2 */html:first-child #cinco { color: red }/* Safari 2-3 */html[xmlns*=""] body:last-child #seis { color: red }/* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:nth-of-type(1) #siete { color: red }/* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:first-of-type #ocho { color: red }/* saf3+, chrome1+ */@media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red }}/* iPhone / mobile webkit */@media screen and (max-device-width: 480px) { #veintiseis { color: red }}/* Safari 2 - 3.1 */html[xmlns*=""]:root #trece { color: red }/* Safari 2 - 3.1, Opera 9.25 */*|html[xmlns*=""] #catorce { color: red }/* Everything but IE6-8 */:root *> #quince { color: red }/* IE7 */*+html #dieciocho { color: red }/* Firefox only. 1+ */#veinticuatro, x:-moz-any-link { color: red }/* Firefox 3.0+ */#veinticinco, x:-moz-any-link, x:default { color: red }/***** Attribute Hacks ******//* IE6 */#once { _color: blue }/* IE6, IE7 */#doce { *color: blue; /* or #color: blue */ }/* Everything but IE6 */#diecisiete { color/**/: blue }/* IE6, IE7, IE8 */#diecinueve { color: blue\9; }/* IE7, IE8 */#veinte { color/*\**/: blue\9; }/* IE6, IE7 -- acts as an !important */#veintesiete { color: blue !ie; } /* string after ! can be anything */8. 創建模糊文本
.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}9. 不使用(yòng)表格實現跨浏覽器垂直水(shuǐ)平居中圖片
這(zhè)段代碼可(kě)以在一個(gè)已知寬高(gāo)的(de)容器内垂直水(shuǐ)平居中一個(gè)未知大(dà)小的(de)圖片，這(zhè)是 IE 的(de)一個(gè)hack：
10. 高(gāo)亮選中的(de) input
// HTMLCheck box label hereCheck box label hereCheck box label here// CSSinput:checked + label{ background: yellow; }11. 跨浏覽器透明(míng)度
selector { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */}12. CSS投影(yǐng)
// 外投影(yǐng).shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc;}// 内投影(yǐng).shadow { -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000;}13. 跨浏覽器最小高(gāo)度
#div { min-height: 500px; height:auto !important; height: 500px;}14. 固定 Footer
#footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999;}/* IE 6 */* html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}15. 清除浮動 Clearfix
/* slightly enhanced, universal clearfix hack */.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }.clearfix { display: inline-block; }/* start commented backslash hack \*/* html .clearfix { height: 1%; }.clearfix { display: block; }/* close commented backslash hack */16. 給可(kě)點擊元素添加手型光(guāng)标
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer;}17. iPad 定向CSS
@media only screen and (max-device-width: 1024px) and (orientation:portrait) { .landscape { display: none; }}@media only screen and (max-device-width: 1024px) and (orientation:landscape) { .portrait { display: none; }}Your device orientation is "portrait"
Your device orientation is "landscape"
18. Pre 标簽内文本換行
pre{height: 120px;overflow: auto;font-family: “Consolas”,monospace;font-size: 9pt;text-align:left;background-color: #FCF7EC;overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, notwhite-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */word-wrap: break-word; /* Internet Explorer 5.5+ */margin: 0px 0px 0px 0px;padding:5px 5px 3px 5px;white-space : normal; /* crucial for IE 6, maybe 7? */}19. CSS3媒體查詢
/* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ----------- */@media only screenand (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}/* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */}/* iPads (portrait) ----------- */@media only screenand (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* Styles */}/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}20. 重置加載
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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}/* remember to define focus styles! */:focus { outline: 0;}body { line-height: 1; color: black; background: white;}ol, ul { list-style: none;}/* tables still need 'cellspacing="0"' in the markup */table { border-collapse: separate; border-spacing: 0;}caption, th, td { text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after { content: "";}blockquote, q { quotes: "" "";}21. 多(duō)邊框
元素必須是相對(duì)定位，且具有足夠的(de)padding來(lái)顯示多(duō)餘的(de)邊框：
#borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600;}#borders:before { content:""; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929;}#borders:after { content:""; position:absolute; z-index:-1; top:15px; left:15px; right:15px; bottom:15px; border:5px solid #00b4ff; background:#fff;}22. 移除IE中textarea的(de)滾動條
textarea { overflow: auto; }23. 簡單但好看的(de)引用(yòng)樣式
