建站
咨詢
售后
建站咨詢
新聞中心
面對每年如此多的新趨勢 ,保持行業(yè)的領(lǐng)先是個很困難問題. 網(wǎng)站設(shè)計者和前端工程師都已經(jīng)全面的使用 CSS3 properties, 決定這些的是 瀏覽器支持 和新的特性. 但是還是有些優(yōu)秀的CSS2代碼片段和CSS3一起運(yùn)行中.
創(chuàng)新互聯(lián)技術(shù)團(tuán)隊10年來致力于為客戶提供網(wǎng)站制作、網(wǎng)站設(shè)計、品牌網(wǎng)站制作、網(wǎng)絡(luò)營銷推廣、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗豐富的技術(shù)團(tuán)隊，先后服務(wù)、推廣了1000多家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。
這篇文字里我會介紹50 個便于使用的 CSS2/CSS3 代碼片段 給所有的WEB專業(yè)人員. 選擇IDE開發(fā)環(huán)境來存儲這些是個不錯選擇, 或者僅僅是把它們保存為一個小小的CSS文件. 不管那種方式我肯定設(shè)計者和開發(fā)者都會發(fā)現(xiàn)他們之中一些有用的.
推薦閱讀: 對初學(xué)者的 20個有用的CSS技巧
1. CSS 重置
- 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 {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- outline: none;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- html { height: 101%; }
- body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
- ol, ul { list-style: none; }
- blockquote, q { quotes: none; }
- blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
- strong { font-weight: bold; }
- table { border-collapse: collapse; border-spacing: 0; }
- img { border: 0; max-width: 100%; }
- p { font-size: 1.2em; line-height: 1.0em; color: #333; }
基本的CSS重置是網(wǎng)絡(luò)上最常見的代碼片段. 這是我自己定制的重置代碼，它基于 Eric Meyer’s reset codes。里面有一些圖片的設(shè)定以及為所有的核心元素定義邊框, 保持適當(dāng)?shù)膍arings 和 padding.
2. 經(jīng)典的 CSS Clearfix
- .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
- .clearfix { display: inline-block; }
- html[xmlns] .clearfix { display: block; }
- * html .clearfix { height: 1%; }
這個clearfix代碼被很多聰明的開發(fā)者用于網(wǎng)站. 它應(yīng)用于一個用于保存浮動元素的盒子模型上. 這將確保里面的任何內(nèi)容都以拉伸方式出現(xiàn)而不是浮動出現(xiàn).
3. 2011 更新的 Clearfix
- .clearfix:before, .container:after { content: ""; display: table; }
- .clearfix:after { clear: both; }
- /* IE 6/7 */
- .clearfix { zoom: 1; }
這里就不說這個新版本和經(jīng)典版本之間的主要差差異了. 它們兩個都可以有效的清除你的浮動元素, 而且都支持流行的瀏覽器甚至是Internet Explorer 6-8.
4. 跨瀏覽器的透明度
- .transparent {
- 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 */
- }
Code Source
一些新的CSS3屬性我們可能認(rèn)為它適用于任何地方. 實際上不行,我們還得稍微調(diào)整下,透明度就是個例子. 加上這個filter屬性來保證它能在IE游覽器里正常運(yùn)行.
5. CSS 塊引用模版
- 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;
- }
Code Source
不是所有的人都必須在他們的網(wǎng)站上使用blockquotes. 但是我認(rèn)為這是一個很好的元素用于分離引用或是優(yōu)化博客和網(wǎng)頁上的重復(fù)內(nèi)容. 上面的代碼為你的blockquotes提供一個默認(rèn)樣式,這樣你的內(nèi)容就不會看起來單調(diào)乏味.
6. 個性的圓角
- #container {
- -webkit-border-radius: 4px 3px 6px 10px;
- -moz-border-radius: 4px 3px 6px 10px;
- -o-border-radius: 4px 3px 6px 10px;
- border-radius: 4px 3px 6px 10px;
- }
- /* alternative syntax broken into each line */
- #container {
- -webkit-border-top-left-radius: 4px;
- -webkit-border-top-right-radius: 3px;
- -webkit-border-bottom-right-radius: 6px;
- -webkit-border-bottom-left-radius: 10px;
- -moz-border-radius-topleft: 4px;
- -moz-border-radius-topright: 3px;
- -moz-border-radius-bottomright: 6px;
- -moz-border-radius-bottomleft: 10px;
- }
大多數(shù)開發(fā)者都熟悉CSS3的圓角屬性. 但是你知道如何為每個角設(shè)定不同的值嗎? 上面的代碼幫你搞定這個問題! 上面的兩個版本都為你實現(xiàn)了這個效果,仔細(xì)研究下吧.
#p#
7.一般媒體查詢
- /* Smartphones (portrait and landscape) ----------- */
- @media only screen
- and (min-device-width : 320px) and (max-device-width : 480px) {
- /* Styles */
- }
- /* Smartphones (landscape) ----------- */
- @media only screen and (min-width : 321px) {
- /* Styles */
- }
- /* Smartphones (portrait) ----------- */
- @media only screen and (max-width : 320px) {
- /* Styles */
- }
- /* iPads (portrait and landscape) ----------- */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
- /* Styles */
- }
- /* iPads (landscape) ----------- */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
- /* Styles */
- }
- /* iPads (portrait) ----------- */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
- /* Styles */
- }
- /* Desktops and laptops ----------- */
- @media only screen and (min-width : 1224px) {
- /* Styles */
- }
- /* Large screens ----------- */
- @media only screen and (min-width : 1824px) {
- /* Styles */
- }
- /* iPhone 4 ----------- */
- @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
- /* Styles */
- }
Code Source
這是一個很棒的模版，你能在CSS-Tricks找到其它零碎的媒體查詢。不管怎樣我已經(jīng)把他們的例子全拷下來了，那里面包括了成噸的實際的移動設(shè)備。這些代碼甚至能針對視網(wǎng)膜屏設(shè)備，使用最小設(shè)備像素比例。
8. 現(xiàn)代字體棧
- /* Times New Roman-based serif */
- font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
- /* A modern Georgia-based serif */
- font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
- /*A more traditional Garamond-based serif */
- font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
- /*The Helvetica/Arial-based sans serif */
- font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
- /*The Verdana-based sans serif */
- font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
- /*The Trebuchet-based sans serif */
- font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
- /*The heavier "Impact" sans serif */
- font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
- /*The monospace */
- font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
Code Source
你很難為設(shè)計一個新的頁面頭腦風(fēng)暴式的想出自己的CSS字體棧。我希望這一小片代碼能減輕一些折磨，并給你一些可以著手開始的模版。如果你想找更多的例子，查看一下CSS 字體棧 ，這是我最喜歡的資源之一。
9. 自定義文本選擇
- ::selection { background: #e2eae2; }
- ::-moz-selection { background: #e2eae2; }
- ::-webkit-selection { background: #e2eae2; }
一些新式的瀏覽器會允許你定義頁面中的高亮顏色。默認(rèn)這是設(shè)為淡藍(lán)色的，但你可以設(shè)置任何投你所好的顏色值，這小片代碼包括了典型的::selection目標(biāo)以及專為Webkit和Mozilla的特定前綴。
10.隱藏H1文本為Logo標(biāo)志
- h1 {
- text-indent: -9999px;
- margin: 0 auto;
- width: 320px;
- height: 85px;
- background: transparent url("images/logo.png") no-repeat scroll;
- }
我第一次注意到這個技術(shù)實現(xiàn)是在古老的Digg 布局 。為了SEO的目的，你也可以設(shè)置一個包含有你的站點名稱的H1標(biāo)簽。但使用CSS我們能移走這個文本使它不可見，并用一個客制化的logo圖片替換它。
11. polaroid圖像邊界
- img.polaroid {
- background:#000; /*Change this to a background image or remove*/
- border:solid #fff;
- border-width:6px 6px 20px 6px;
- box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
- -webkit-box-shadow:1px 1px 5px #333;
- -moz-box-shadow:1px 1px 5px #333;
- height:200px; /*Set to height of your image or desired div*/
- width:200px; /*Set to width of your image or desired div*/
- }
Code Source
應(yīng)用這個基礎(chǔ)的片段將使你能在你的圖像上實現(xiàn).polaroid 類。這將會創(chuàng)建老照片風(fēng)格效果，帶一個很寬的白邊和一些淡淡的陰影。你要更新寬/高數(shù)值，以便和你的圖片尺寸和網(wǎng)站布局相匹配。
12. 錨鏈接偽類
- a:link { color: blue; }
- a:visited { color: purple; }
- a:hover { color: red; }
- a:active { color: yellow; }
Code Source
大多數(shù)CSS開發(fā)者知道錨鏈接類和:hover效果。但是我想引入這小段代碼給新手做個參考。這些是一個錨鏈接和一些其他HTML元素的四個默認(rèn)狀態(tài)。把它們留在手邊，直到你可以記住一些更復(fù)雜的情況。
#p#
13. 花式CSS3 Pull-引文
- .has-pullquote:before {
- /* Reset metrics. */
- padding: 0;
- border: none;
- /* Content */
- content: attr(data-pullquote);
- /* Pull out to the right, modular scale based margins. */
- float: right;
- width: 320px;
- margin: 12px -140px 24px 36px;
- /* Baseline correction */
- position: relative;
- top: 5px;
- /* Typography (30px line-height equals 25% incremental leading) */
- font-size: 23px;
- line-height: 30px;
- }
- .pullquote-adelle:before {
- font-family: "adelle-1", "adelle-2";
- font-weight: 100;
- top: 10px !important;
- }
- .pullquote-helvetica:before {
- font-family: "Helvetica Neue", Arial, sans-serif;
- font-weight: bold;
- top: 7px !important;
- }
- .pullquote-facit:before {
- font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
- font-weight: bold;
- top: 7px !important;
- }
Code Source
Pull-引文(Pull-quotes)與塊引用(blockquotes)不同，它們出現(xiàn)在你的博客或者新聞文章的一邊。這些引文經(jīng)常從文章中引用文本，所以它們和塊引用顯示的稍許不一樣。這些默認(rèn)類具有一些基礎(chǔ)的屬性，帶有3個可供選擇的獨(dú)特的字體類型。
14.全屏背景和CSS3
- html {
- background: url('images/bg.jpg') no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- }
Code Source
我應(yīng)該標(biāo)注一下這個代碼在不支持CSS3語法的老式瀏覽器中不會正確的工作。然而如果你是在尋找一個不需要關(guān)心遺留系統(tǒng)支持的快速的解決方案，這是你能找到的最好的代碼段！給你網(wǎng)站背景增加很大的照片同時又能使它們能在你滾動的時候保持可變尺寸和固定不動。
15. 垂直居中內(nèi)容
- .container {
- min-height: 6.5em;
- display: table-cell;
- vertical-align: middle;
- }
Code Source
使用 margin: 0 auto 技術(shù)，很容易就能使內(nèi)嵌的內(nèi)容位于你頁面的水平正中。然而對垂直的文本要困難的多，尤其是考慮到滾動條和其它的方式。但這個是無需JavaScript就能完美無瑕工作的純CSS解決方案。
16.強(qiáng)制垂直滾動條
- html { height: 101% }
如果你的頁面內(nèi)容不能填滿你的瀏覽器窗口整個高度，那么你不會焦灼于獲取滾動條。但是改變大小將會強(qiáng)制它們出現(xiàn)，并給你的窗口寬度增加額外的10-15像素，推走你的頁面內(nèi)容。這個代碼段將保證你的HTML元素總是比瀏覽器高一點點，強(qiáng)制滾動條一直停留在適當(dāng)位置。
17. CSS3梯度模板
- #colorbox {
- background: #629721;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
- background-image: -webkit-linear-gradient(top, #83b842, #629721);
- background-image: -moz-linear-gradient(top, #83b842, #629721);
- background-image: -ms-linear-gradient(top, #83b842, #629721);
- background-image: -o-linear-gradient(top, #83b842, #629721);
- background-image: linear-gradient(top, #83b842, #629721);
- }
CSS3梯度是新技術(shù)參數(shù)的另一個奇妙的部分。許多特定前綴難以記憶，所以這個代碼片段將能為你每個項目節(jié)省一點時間。
18. @font-face模版
- @font-face {
- font-family: 'MyWebFont';
- src: url('webfont.eot'); /* IE9 Compat Modes */
- src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('webfont.woff') format('woff'), /* Modern Browsers */
- url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
- url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
- }
- body {
- font-family: 'MyWebFont', Arial, sans-serif;
- }
Code Source
這是另一些不是很容易記的CSS3代碼。使用@font-face你可以給你的網(wǎng)站嵌入自己的TTF/OTF/SVG/WOFF文件，生成自定義的字體類型。為你未來的項目，將這個模版作為一個基本的例子。
19. 完整定義CSS3元素
- p {
- position:relative;
- z-index:1;
- padding: 10px;
- margin: 10px;
- font-size: 21px;
- line-height: 1.3em;
- color: #fff;
- background: #ff0030;
- -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
- -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
- box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- }
- p:before {
- content: "";
- position: absolute;
- z-index: -1;
- top: 3px;
- bottom: 3px;
- left :3px;
- right: 3px;
- border: 2px dashed #fff;
- }
- p a {
- color: #fff;
- text-decoration:none;
- }
- p a:hover, p a:focus, p a:active {
- text-decoration:underline;
- }
Code Source
20. CSS3 斑馬條紋
- tbody tr:nth-child(odd) {
- background-color: #ccc;
- }
Code Source
這個項目最好的應(yīng)用是在數(shù)據(jù)列表上. 為40或50行的表來定義是很費(fèi)勁的事情. 通過添加上面的CSS3條紋屬性可以方便的為奇數(shù)行添上背景色.
21. 字符美化
- .amp {
- font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
- font-style: italic;
- font-weight: normal;
- }
Code Source
這個css類用在頁面內(nèi)容中圍繞文字的span元素. 它會將一些典型的serif 字體用斜體形式顯示.測試下看看是不是你喜歡的風(fēng)格吧.
#p#
22. 段落首字母
- p:first-letter{
- display: block;
- margin: 5px 0 0 5px;
- float: left;
- color: #ff3366;
- font-size: 5.4em;
- font-family: Georgia, Times New Roman, serif;
- }
在報紙和圖片上你一定看到過它們的首字母的特殊效果. 對于有足夠版面的網(wǎng)頁或博客來說肯定會受其影響. 上面的CSS規(guī)則定義了所有的P標(biāo)簽,你也可以把它們定義為一個class或是ID.
23. CSS3盒子模型內(nèi)部陰影
- #mydiv {
- -moz-box-shadow: inset 2px 0 4px #000;
- -webkit-box-shadow: inset 2px 0 4px #000;
- box-shadow: inset 2px 0 4px #000;
- }
陰影為我們的網(wǎng)站提供了巨大的變化. 你幾乎可以所有的元素定義這個屬性, 看起來都非常不錯. 上面的代碼定義了內(nèi)陰影,對設(shè)計來說很丑,但在一定的環(huán)境下還是很好的.
24. CSS3盒子模型外部陰影
- #mydiv {
- -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- }
與CSS3內(nèi)陰影一樣,我也提供一段外陰影的代碼. 注意第三個數(shù)字表示模糊距離,第四個表示范圍. 了解更多從W3Schools.
25. 三角形列表前綴
- ul {
- margin: 0.75em 0;
- padding: 0 1em;
- list-style: none;
- }
- li:before {
- content: "";
- border-color: transparent #111;
- border-style: solid;
- border-width: 0.35em 0 0.35em 0.45em;
- display: block;
- height: 0;
- width: 0;
- left: -1em;
- top: 0.9em;
- position: relative;
- }
Code Source
不管你信不信,反正我是信了.在CSS3中三角形的列表前綴是可能的. 這個看起來太酷了,可惜的是不是所有的瀏覽器都支持.
26. 固定寬度的居中布局
- #page-wrap {
- width: 800px;
- margin: 0 auto;
- }
Code Source
我知道之前已經(jīng)提到過怎樣設(shè)置水平居中.在這里的代碼是完美實現(xiàn)固定寬度的水平居中 .
27. CSS3 文本分列
- #columns-3 {
- text-align: justify;
- -moz-column-count: 3;
- -moz-column-gap: 12px;
- -moz-column-rule: 1px solid #c4c8cc;
- -webkit-column-count: 3;
- -webkit-column-gap: 12px;
- -webkit-column-rule: 1px solid #c4c8cc;
- }
Code Source
CSS3分列在網(wǎng)站上看起來會非常不錯, 現(xiàn)實的問題是我們?nèi)绾伟鸦谖谋镜膬?nèi)容分列顯示. 通過上面的代碼,為你的文本段落設(shè)置其中的列的數(shù)值,文本內(nèi)容將會按你設(shè)定的值分成寬度相同的列.
28. CSS 固定的頁腳
- #footer {
- position: fixed;
- left: 0px;
- bottom: 0px;
- height: 30px;
- width: 100%;
- background: #444;
- }
- /* 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');
- }
Code Source
這個實際用起來比聽起來要有用的多, 為你的網(wǎng)站添加一個固定頁腳是很簡單的. 這些頁腳不管頁面如何滾動都是固定的,你可以包含一些幫助信息或是聯(lián)系方式等等. 完美的為用戶界面增加價值.
29. PNG 圖片在 IE6下的透明度
- .bg {
- width:200px;
- height:100px;
- background: url(/folder/yourimage.png) no-repeat;
- _background:none;
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
- }
- /* 1px gif method */
- img, .png {
- position: relative;
- behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
- this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
- this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
- this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
- this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
- }
Code Source
使用透明圖片已經(jīng)變成網(wǎng)站的最基本的實踐. 開始的時候是gif圖,現(xiàn)在都使用PNG透明圖. 不幸的是一些IE老版的瀏覽器不支持這個透明度屬性. 添加上上面的代碼就能搞定這個問題.
30. 跨瀏覽器的最小高度
- #container {
- min-height: 550px;
- height: auto !important;
- height: 550px;
- }
不得不使用min-height的開發(fā)者知道都是那些瀏覽器支持這個屬性. 很多新的游覽器都支持這個屬性, 然而Internet Explorer 和 老版本的 Firefox對這個支持有問題. 上面的代碼能解決這個Bug.
31. CSS3發(fā)光輸入框
分享題目：每位設(shè)計師都應(yīng)該擁有的50個CSS代碼片段
鏈接分享：http://fisionsoft.com.cn/article/dhpcpci.html
