360UXC-快樂CSS3之旅

Hello！everybody！對于CSS3的應(yīng)用一直是前端的痛。因?yàn)閲鴥?nèi)瀏覽器IE、IE內(nèi)核瀏覽器市場份額實(shí)在是太大，對于既想優(yōu)雅的使用CSS3來實(shí)現(xiàn)復(fù)雜的頁面效果，又不得不考慮國內(nèi)的情況?？啾频那岸碎_發(fā)人員只能繼續(xù)使用古老的圖片來實(shí)現(xiàn)圓角、背景、漸變的效果。

如果你是一個(gè)具有探索性的前端攻城師，那么就用CSS3來實(shí)現(xiàn)吧！既能鍛煉CSS3新的屬性，同時(shí)對自己的技術(shù)不斷提高，幫助CSS3應(yīng)用的推廣；也能夠?qū)崿F(xiàn)IE系列的兼容。不過這個(gè)過程很痛苦。你得和PM一頓解釋為什么這樣實(shí)現(xiàn)，又得折騰更多的代碼！這太苦逼了！可是我們是一群經(jīng)得起的前端攻城師??！ 哈哈~！

對了！本文的一些實(shí)例是我做項(xiàng)目中運(yùn)用到的！主要針對Chrome內(nèi)核制作開發(fā)。故我很幸福哦….而且很是興奮興奮滴說！

CSS3 Transition的應(yīng)用

語法：

取值：

[ transition-property ]：檢索或設(shè)置對象中的參與過渡的屬性
[ transition-duration ]：檢索或設(shè)置對象過渡的持續(xù)時(shí)間
[ transition-timing-function ]：檢索或設(shè)置對象中過渡的動(dòng)畫類型
[ transition-delay ]：檢索或設(shè)置對象延遲過渡的時(shí)間

復(fù)合屬性。檢索或設(shè)置對象變換時(shí)的過渡。

PS:摘自CSS參考手冊

想更多的了解，去看手冊吧！這是最好學(xué)習(xí)的地方哦！

好啦~我們來看個(gè)運(yùn)用實(shí)例吧！

首先，看到這個(gè)設(shè)計(jì)圖稿時(shí)，可能一些人，這個(gè)有什么地方可用到transition？童鞋！看到那個(gè)紅框向上的箭頭么？這個(gè)是要有交互效果滴！

即:滑進(jìn)時(shí)，圖片向上走，顯示右邊圖片的所展示的部分。

嗯，現(xiàn)在看代碼了哦~！

這是結(jié)構(gòu)代碼

CSS3主要代碼：

其中觸發(fā)的動(dòng)作就是.ext-block:hover { top:-95px;}

這兩句就能實(shí)現(xiàn)鼠標(biāo)滑入時(shí)，圖片上滑，然后顯示其他的。這個(gè)省了好多js吧！哈哈！可能有些人說：語法是四個(gè)參數(shù)，為什么你就寫了三個(gè)？這個(gè)…看手冊吧！

CSS3 Box-shadow的應(yīng)用

語法：

默認(rèn)值： none

取值：

none：無陰影
<length>①：第1個(gè)長度值用來設(shè)置對象的陰影水平偏移值?？梢詾樨?fù)值
<length>②：第2個(gè)長度值用來設(shè)置對象的陰影垂直偏移值?？梢詾樨?fù)值
<length>③：如果提供了第3個(gè)長度值則用來設(shè)置對象的陰影模糊值。不允許負(fù)值
<length>④：如果提供了第4個(gè)長度值則用來設(shè)置對象的陰影外延值。不允許負(fù)值
：設(shè)置對象的陰影的顏色。
inset：設(shè)置對象的陰影類型為內(nèi)陰影。該值為空時(shí)，則對象的陰影類型為外陰影

PS:摘自CSS參考手冊

同樣以Transition里的圖片為例。
當(dāng)滑入時(shí)，顯示陰影。
結(jié)構(gòu)代碼一樣，主要來看下CSS代碼：

Box-shadow:0 0 3px #ddd;這里為什么不用私有屬性，因?yàn)閏hrome已經(jīng)完全支持啦。
其中第四個(gè)參數(shù)值基本用不到。
這樣就實(shí)現(xiàn)了滑入時(shí)，顯示陰影。而不用苦逼的切背景圖了。有時(shí)可能IE6用PNG24位的透明圖片來處理時(shí)，苦逼的出現(xiàn)灰色色塊。

CSS3 Border-radius的應(yīng)用

語法：

默認(rèn)值：0
取值：

<length>：用長度值設(shè)置對象的圓角半徑長度。不允許負(fù)值
<percentage>：用百分比設(shè)置對象的圓角半徑長度。不允許負(fù)值

說明：
設(shè)置或檢索對象使用圓角邊框。提供2個(gè)參數(shù)，2個(gè)參數(shù)以“/”分隔，每個(gè)參數(shù)允許設(shè)置1~4個(gè)參數(shù)值，第1個(gè)參數(shù)表示水平半徑，第2個(gè)參數(shù)表示垂直半徑，如第2個(gè)參數(shù)省略，則默認(rèn)等于第1個(gè)參數(shù)
水平半徑：如果提供全部四個(gè)參數(shù)值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用于四個(gè)角。
如果只提供一個(gè)，將用于全部的于四個(gè)角。
如果提供兩個(gè)，第一個(gè)用于上左(top-left)、下右(bottom-right)，第二個(gè)用于上右(top-right)、下左(bottom-left)。
如果提供三個(gè)，第一個(gè)用于上左(top-left)，第二個(gè)用于上右(top-right)、下左(bottom-left)，第三個(gè)用于下右(bottom-right)。
垂直半徑也遵循以上4點(diǎn)。

PS:摘自CSS參考手冊

這張截圖，按鈕的圓角用的border-radius來實(shí)現(xiàn)的，不用苦逼的用圖片做拼合了。
以下為實(shí)現(xiàn)的結(jié)構(gòu)代碼和CSS3代碼：

border-radius:2px；這個(gè)是實(shí)現(xiàn)了四個(gè)角是圓角啦！簡單吧？

順便說下，這張圖的三態(tài)，完全可以用CSS3來解決。其中的圓角，陰影，文字陰影，內(nèi)陰影，背景漸變等都是用CSS3來實(shí)現(xiàn)的。這塊的CSS代碼已經(jīng)給出了哦！自己可以看下！其中文字陰影和box-shadow類似。

CSS3 Background漸變的應(yīng)用

語法：

默認(rèn)值：none
取值：

none：無背景圖。
<url>：使用絕對或相對地址指定背景圖像。
<linear-gradient>：使用線性漸變創(chuàng)建背景圖像。（CSS3）
<radial-gradient>：使用徑向(放射性)漸變創(chuàng)建背景圖像。（CSS3）
<repeating-linear-gradient>：使用重復(fù)的線性漸變創(chuàng)建背景圖像。（CSS3）
<repeating-radial-gradient>：使用重復(fù)的徑向(放射性)漸變創(chuàng)建背景圖像。（CSS3）

說明：
設(shè)置或檢索對象的背景圖像。
如果設(shè)置了background-image，同時(shí)也建議作者設(shè)置background-color用于當(dāng)背景圖像不可見時(shí)保持與文本一定的對比。

PS:摘自CSS參考手冊

同樣以上面按鈕圖片來做實(shí)例。給的樣式代碼是簡寫了。沒有用background-image，而用background，效果是一樣滴！只是這個(gè)是用于線性漸變。具體的語法規(guī)則請參考手冊吧！

	.download-btn { position:absolute; right:10px; top:50%; margin-top:-13px; width:138px; height:26px; line-height:26px; border:1px solid #2d53af; border-radius:2px; box-shadow:inset 0 1px 1px #6e9ae0, 0 1px 2px rgba(0,0,0,0.3); background:-webkit-linear-gradient(#5588da,#4d7bd6); color:#fff; font-size:14px; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,0.3); text-align:center;}

這就是三態(tài)時(shí)，不同的漸變背景色的運(yùn)用！只是這用了webkit的私有屬性。這個(gè)就不用我解釋了吧？類似transition。

以上這些是比較基本而且常用到的一些CSS3新的特性來開發(fā)項(xiàng)目。在CSS3的運(yùn)用上，我們還有很長的路要走，畢竟現(xiàn)在國內(nèi)市場做前端的很痛苦！

忘記說了，這個(gè)是項(xiàng)目是我在360極速瀏覽器擴(kuò)展中心運(yùn)用到的一些效果，上線后我去看了下，其中的Transition效果去掉了，采用js來實(shí)現(xiàn)。這個(gè)具體情況不清楚，可能他們考慮的更多吧！畢竟極速現(xiàn)在是兩個(gè)內(nèi)核（IE內(nèi)核）哦！按鈕的也弄成圖片，這個(gè)我能理解。因?yàn)樵诶锩嬖黾恿藗€(gè)“+”號(hào)！這個(gè)東西用文本來控制確實(shí)不好實(shí)現(xiàn)，在不同系統(tǒng)下、不同字體下會(huì)變形。不過好多地方的一些運(yùn)用還是存留滴，像陰影什么還在。順帶說句，里面也用到了CSS3的display:box；布局！這個(gè)很有意思！有興趣的可以去了解下。