CSS3新增特性詳解（一）

注：因爲CSS3的新特性較多，因此分兩篇博文來講明。第一篇主要包括新的選擇器、文字及塊陰影、多背景圖、顏色漸變、圓角等。第二篇主要細說CSS3的各類動畫效果，如：旋轉、移動、縮放等，還包括圖標字體的應用。

 

CSS3屬性選擇器：

a[href$=‘.pdf’] 表示 href屬性中以.pdf結尾的被選中

a[href^=‘mailto’] 表示href屬性中以mailto開頭的被選中

a[href*=‘item’] 表示href屬性中含有item的都被選中

其中a只是指代元素標籤

現有三個div，他們的屬性name的值各不一樣：

樣式以下：

加入選擇器：

效果：

再加入一屬性選擇器:

效果：

選擇器的用法相信你們已經比較熟練了，這裏也比較簡單就再也不贅述了。這種屬性選擇器比較多用在 href屬性中，經過載入文件名的不一樣後綴名來作出相應的選擇，如：.jpg .png .gif等等。

 

CSS3僞類選擇器:

現有一表格以下：

 

加入僞類選擇器：

:nth-of-type能夠經過參數來選擇表格的奇數行或偶數行，odd表明奇數行，even表明偶數行。

效果：

 

 

:nth-child僞類，一樣是用來選擇行。參數爲 n時選中全部行，參數爲 n+i時表示從第 i行開始下面的都被選中， 2n表示 2的倍數行被選中，即偶數行， 3n表示 3的倍數行被選中。

效果：

n+i:

 

2n:

 

3n:

 

 

還有一個:nth-last-child()僞類，用法和nth-child基本一致，只是全部規則都是從下往上數的，就至關於把表倒個個。這裏也不必多說了，有興趣的讀者能夠本身試下。

 

多背景圖：

CSS3中backgroud-image能夠設置多個背景圖，還能夠設置每一個背景圖的位置。

 

每一個背景圖有四個參數，1. url地址 2.上下位置，包括 top center bottom，也可用百分比 3.左右位置，包括 left center right，也可用百分比

4.重複方式，包括 no-repeat repeat-y repeat-x。很好理解，就是不平鋪、縱向平鋪、橫向平鋪。

(這裏偷個懶沒截圖，讀者們能夠拿本身喜歡的圖片嘗試下）

 

----------------------------------------------------------------------------我是分割線------------------------------------------------------------------

從這裏開始就要注意了，因爲不一樣內核的瀏覽器對CSS3的支持程度是不一樣的，因此以後的全部特性均要加上前綴。

在下面的例子中，博主爲了節省時間沒有加前綴或只加了-webkit-前綴。

具體寫法以下：

 

-webkit-： webkit核心的瀏覽器，也就是谷歌的 Chrome瀏覽器；

-moz-： Gecko核心的瀏覽器；

-o-： Opera瀏覽器；

-ms-：微軟的IE瀏覽器。

雖然一個簡單的樣式就要寫五遍，但作好網頁的兼容性本就是前端工程師的職責。下面每個特性在實際編寫網頁時均要按照示例來寫，包括第二篇博文中的動畫特性。

 

文字陰影：

這裏先寫一個 h1標籤，內容是我老師喜歡用的一句話，你們不要吐槽了...

寫法：

文字陰影包括4個參數，1.橫向偏移量 2.縱向偏移量 3.模糊半徑（數值越高越模糊，反之越清晰）4.陰影顏色

效果：

 

設置較大的偏移量能夠產生漂浮並有投影的效果：

像不像有光打下來？

 

設置多個陰影，用逗號隔開。模糊半徑逐漸增大，產生輝光效果。

燈箱的感受

 

設置多個陰影，偏移方向各不相同，設置合適的顏色產生浮雕效果。

 

 

塊級陰影：

塊陰影能夠應用於許多塊級元素上

現給一div加上塊陰影：

 

效果：

box-shadow有6個參數。1.投影方式（可選），不寫默認外部陰影， inset表明內陰影 2&3.表示偏移量，與文字陰影相似 4.模糊半徑（可選）5.陰影擴展半徑（可選），值越大陰影範圍越大 6.陰影顏色

內陰影效果：

現有一紅色圓形：

加上多級塊陰影，擴展半徑逐漸增大：

太陽就出來了

 

圓角：

圓角這一特性應用很是普遍，還能夠用圓角來畫圓形。

應用於div上：

 

效果：

 

border-radius參數能夠是1到4個：

1個參數表示四個角都應用該值；

2個參數表示左上、右下用第一個值，右上、左下用第二個值；

3個參數表示左上用第一個值，右上、左下用第二個值，右下用第三個值；

4個參數表示四個值依次用在左上、右上、右下、左下（逆時針）。

通常1個和4個參數用的較多，其餘的有點蛋疼。

四個參數：

效果：

這樣的圓角怎麼作？

很簡單，只須要讓圓角的值等於這個div塊高度的一半便可：

引伸出用圓角畫圓：

先建一正方形div塊，讓其圓角值大於等於其邊長的一半便可，上面例子中的太陽就是按此方法作出的。

 

漸變：

漸變分爲兩種：線性漸變、徑向漸變

線性漸變：

 

因爲繪製漸變時，會被瀏覽器解析成爲一張背景圖片，因此作漸變時要用到backgroud-image。

漸變第一個參數爲起始位置：left表示從左到右 top表示從上到下，以此類推。以後能夠設置多個顏色，顏色後能夠設置漸變的起始位置（用百分比）。

效果：

 

徑向漸變，顧名思義，是按圓的半徑方向漸變：

center表示從中心開始漸變

又一個太陽出來了，注意這可不是用陰影作的，而是徑向漸變。

 

感謝您的瀏覽，但願能對您有所幫助，CSS3新特性第二篇會在近期發表。