360UXC-快樂CSS3之旅

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

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

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

CSS3 Transition的應用

語法：

取值：

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

復合屬性。檢索或設置對象變換時的過渡。

PS:摘自CSS參考手冊

想更多的了解，去看手冊吧！這是最好學習的地方哦！

好啦~我們來看個運用實例吧！

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

即:滑進時，圖片向上走，顯示右邊圖片的所展示的部分。

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

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

CSS3主要代碼：

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

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

CSS3 Box-shadow的應用

語法：

默認值： none

取值：

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

PS:摘自CSS參考手冊

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

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

CSS3 Border-radius的應用

語法：

默認值：0
取值：

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

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

PS:摘自CSS參考手冊

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

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

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

CSS3 Background漸變的應用

語法：

默認值：none
取值：

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

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

PS:摘自CSS參考手冊

同樣以上面按鈕圖片來做實例。給的樣式代碼是簡寫了。沒有用background-image，而用background，效果是一樣滴！只是這個是用于線性漸變。具體的語法規(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)時，不同的漸變背景色的運用！只是這用了webkit的私有屬性。這個就不用我解釋了吧？類似transition。

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

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