詳細分析關於CSS3中新增的特性

註：由於CSS3的新特性較多，所以分兩篇博文來說明。第一篇主要包括新的選取器、文字及塊陰影、多背景圖、色彩坡形、圓角等。第二篇主要細說CSS3的各種動畫效果，如：旋轉、移動、縮放等，還包括表徵圖字型的應用。

CSS3屬性選取器：

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

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

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

其中a只是指代元素標籤

現有三個p，他們的屬性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核心的瀏覽器，也就是Google的Chrome瀏覽器；

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

-o-：Opera瀏覽器；

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

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

文字陰影：

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

寫法：

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

效果：

設定較大的位移量可以產生漂浮並有投影的效果：

像不像有光打下來？

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

燈箱的感覺

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

塊級陰影：

塊陰影可以應用於許多區塊層級元素上

現給一p加上塊陰影：

效果：

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

內陰影製作效果：

現有一紅色圓形：

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

太陽就出來了

圓角：

圓角這一特性應用非常廣泛，還可以用圓角來畫圓形。

應用於p上：

效果：

border-radius參數可以是1到4個：

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

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

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

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

一般1個和4個參數用的較多，其他的有點蛋疼。

四個參數：

效果：

這樣的圓角怎麼做？

很簡單，只需要讓圓角的值等於這個p塊高度的一半即可：

引申出用圓角畫圓：

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

漸層：

漸層分為兩種：線性漸層、放射狀漸層

線性漸層：

由於繪製漸層時，會被瀏覽器解析成為一張背景圖片，所以做漸層時要用到backgroud-image。

漸層第一個參數為起始位置：left表示從左至右 top表示從上到下，以此類推。之後可以設定多個顏色，顏色後可以設定漸層的起始位置（用百分比）。

效果：

放射狀漸層，顧名思義，是按圓的半徑方向漸層：

center表示從中心開始漸層

又一個太陽出來了，注意這可不是用陰影做的，而是放射狀漸層。

【相關推薦】

1. CSS3免費視頻教程

2. 分享一個CSS3的動畫庫

3. CSS3學習之Animation詳解

4. CSS3教學之動畫製作學習

5. 詳解關於css3的新特性