CSS3新特性

簡介

　　CSS 即層疊樣式表（Cascading Stylesheet）。Web 開發中採用 CSS 技術，能夠有效地控制頁面的佈局、字體、顏色、背景和其它效果。只須要一些簡單的修改，就能夠改變網頁的外觀和格式。CSS3 是 CSS 的升級版本，這套新標準提供了更加豐富且實用的規範，如：盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等等，目前有不少瀏覽器已經相繼支持這項升級的規範，如：Firefox、Chrome、Safari、Opera 等等。在 Web 開發中採用 CSS3 技術將會顯著的美化咱們的應用程序，提升用戶體驗，同時也能極大的提升程序的性能。本文將重點介紹一些比較絢麗且實用 CSS3 新特性。

　　CSS3 選擇器（Selector）

　　寫過 CSS 的人應該對 CSS 選擇器不陌生，咱們所定義的 CSS 屬性之因此能應用到相應的節點上，就是由於 CSS 選擇器模式。參考下述代碼：

　　清單 1. CSS 選擇器案例

Body > .mainTabContainer  div  > span[5]{
Border: 1px solod red;
Background-color: white;
Cursor: pointer;
}

　　此處的 CSS 選擇器即：「body > .mainTabContainer div span[5]」 表明這這樣一條路徑：

　　1. 「body」標籤直接子元素裏 class 屬性值爲「mainTabContainer」的全部元素 A

　　2. A 的後代元素（descendant）裏標籤爲 div 的全部元素 B

　　3. B 的直接子元素中的第 5 個標籤爲 span 的元素 C

　　這個 C 元素（可能爲多個）即爲選擇器定位到的元素，如上的 CSS 屬性也會所有應用到 C 元素上。

　　以上爲 CSS2 及以前版本所提供的主要定位方式。如今，CSS3 提供了更多更加方便快捷的選擇器：

　　清單 2. CSS3 選擇器案例　　

Body > .mainTabContainer  tbody:nth-child(even){
Background-color: white;
}

Body > .mainTabContainer  tr:nth-child(odd){
Background-color: black;
}


:not(.textinput){
Font-size: 12px;
}

Div:first-child{
Border-color: red;
}

　　如上所示，咱們列舉了一些 CSS3 的選擇器，在咱們平常的開發中可能會常常用到，這些新的 CSS3 特性解決了不少咱們以前須要用 JavaScript 腳本才能解決的問題。

　　tbody: nth-child(even)， nth-child(odd)：此處他們分別表明了表格（tbody）下面的偶數行和奇數行（tr），這種樣式很是適用於表格，讓人能很是清楚的看到表格的行與行之間的差異，讓用戶易於瀏覽。

　　: not(.textinput)：這裏即表示全部 class 不是「textinput」的節點。

　　div:first-child：這裏表示全部 div 節點下面的第一個直接子節點。

　　除此以外，還有不少新添加的選擇器：

E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:only-child
E:only-of-type
E:empty
E:checked
E:enabled
E:disabled
E::selection
E:not(s)

　　這裏不一一介紹。學會利用這些新特性能夠極大程度的減小咱們的無畏代碼，而且大幅度的提升程序的性能。

　　@Font-face 特性

　　Font-face 能夠用來加載字體樣式，並且它還可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

　　先來看一個客戶端字體簡單的案例：

　　清單 3. Font-face 客戶端字體案例　　

arial courier verdana

　　咱們能夠經過這種方式直接加載字體樣式，由於這些字體（arial）已經安裝在客戶端了。清單 3 這種寫法的做用等同於清單 4：

　　清單 4. 字體基本寫法　　

arial courier verdana

　　相信這種寫法你們應該再熟悉不過了。

　　接下來咱們看看如何使用服務端字體，即：未在客戶端安裝的字體樣式。

　　參看以下代碼：

　　清單 5. Font-face 服務端字體案例　　

@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}

.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

　　清單 5 中聲明的兩個服務端字體，其字體源指向「BORDERW0.eot」和「RUNICMT0.eot」文件，並分別冠以「BorderWeb」和「Runic」的字體名稱。聲明以後，咱們就能夠在頁面中使用了：「 FONT-FAMILY: "BorderWeb" 」 和 「 FONT-FAMILY: "Runic" 」。

　　這種作法使得咱們在開發中若是須要使用一些特殊字體，而又不肯定客戶端是否已安裝時，即可以使用這種方式。

　　Word-wrap & Text-overflow 樣式

　　Word-wrap

　　先來看看 word-wrap 屬性，參考下述代碼：

　　清單 6. word-wrap 案例　　

 wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
 

 

 wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
 

　　比較上述兩段代碼，加入了「word-wrap: break-word」，設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行，文字此時已被打散。因此可見以下的差異：

　　圖 1. 沒有 break-word

      
　　圖 2. 有 break-word
      
　　Text-overflow

　　知道了 word-wrap 的原理，咱們再來看看 text-overflow，其實它與 word-wrap 是協同工做的，word-wrap 設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行，而 text-overflow 則設置或檢索噹噹前行超過指定容器的邊界時如何顯示，見以下示例：

　　清單 7. Text-overflow 案例　　

.clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
  width:200px;background:#ccc;}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
  width:200px; background:#ccc;}

 不顯示省略標記，而是簡單的裁切條

 當對象內文本溢出時顯示省略標記

　　如清單 7 所示，這裏咱們均使用「overflow: hidden」，對於「text-overflow」屬性，有「clip」和「ellipsis」兩種可供選擇。見圖 3 的效果圖。

　　圖 3. Text-overflow 效果圖
       
　　這裏咱們能夠看到，ellipsis 的顯示方式比較人性化，clip 方式比較傳統，咱們能夠依據需求進行選擇。

　　文字渲染（Text-decoration）

　　CSS3 裏面開始支持對文字的更深層次的渲染，咱們來看看下面的例子：

　　清單 8. Text-decoration 案例　　

div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.75px;
}

　　這裏咱們主要以 webkit 內核瀏覽器爲例，清單 8 的代碼效果如圖 4：

　　圖 4. Text-decoration 效果圖
       
　　Text-fill-color: 文字內部填充顏色

　　Text-stroke-color: 文字邊界填充顏色

　　Text-stroke-width: 文字邊界寬度

　　CSS3 的多列布局（multi-column layout）

　　CSS3 如今已經能夠作簡單的佈局處理了，這個 CSS3 新特性又一次的減小了咱們的 JavaScript 代碼量，參考以下代碼：

　　清單 9. CSS3 多列布局　　

.multi_column_style{
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
}

.................
.................

　　這裏咱們仍是以 webkit 內核瀏覽器爲例：

　　Column-count：表示佈局幾列。

　　Column-rule：表示列與列之間的間隔條的樣式

　　Column-gap：表示列於列之間的間隔

　　清單 9 的代碼效果圖如圖 5：

　　圖 5. 多列布局效果圖
        
　　邊框和顏色（color, border）

　　關於顏色，CSS3 已經提供透明度的支持了：

　　清單 10. 顏色的透明度　　

color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);

　　這裏的「rgba」屬性中的「a」表明透明度，也就是這裏的「0.75」，同時 CSS3 還支持 HSL 顏色聲明方式及其透明度：

　　清單 11. HSL 的透明度　　

color: hsla( 112, 72%, 33%, 0.68);

　　對於 border，CSS3 提供了圓角的支持：

　　清單 12. 圓角案例　　

border-radius: 15px;

　　參見下面圓角效果：

　　Figure xxx. Requires a heading
        
　　CSS3 的漸變效果（Gradient）

　　線性漸變

　　左上（0% 0%）到右上（0% 100%）即從左到右水平漸變：

　　清單 13. 左到右的漸變　　

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

　　這裏 linear 表示線性漸變，從左到右，由藍色（#2A8BBE）到紅色（#FE280E）的漸變。效果圖以下：

　　圖 6. 簡單線性漸變效果圖
        
　　同理，也能夠有從上到下，任何顏色間的漸變轉換：

　　圖 7. 各類不一樣線性漸變效果圖
        
　　還有複雜一點的漸變，如：水平漸變，33% 處爲綠色，66% 處爲橙色：

　　清單 14. 複雜線性漸變　　

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

　　這裏的「color-stop」爲拐點，可見效果圖：

　　圖 8. 複雜線性漸變效果圖
        
　　徑向漸變

　　接下來咱們要介紹徑向漸變（radial），這不是從一個點到一個點的漸變，而從一個圓到一個圓的漸變。不是放射漸變而是徑向漸變。來看一個例子：

　　清單 15. 徑向漸變（目標圓半徑爲 0）　　

backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

　　前面「50,50,50」是起始圓的圓心座標和半徑，「50,50,0」藍色是目標圓的圓心座標和半徑，「color-stop(0.5,red)」是斷點的位置和色彩。這裏須要說明一下，和放射由內至外不同，徑向漸變恰好相反，是由外到內的漸變。清單 15 標識的是兩個同心圓，外圓半徑爲 50px，內圓半徑爲 0，那麼就是從黑色到紅色再到藍色的正圓形漸變。下面就是這段代碼的效果：

　　圖 9. 徑向漸變（目標圓半徑爲 0）效果圖
       
　　若是咱們給目標源一個大於 0 半徑，您會看到另一個效果：

　　清單 16. 徑向漸變（目標圓半徑非 0）　　

backgroud:  -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));

　　這裏咱們給目標圓半徑爲 10，效果圖以下：

　　圖 10. 徑向漸變（目標圓半徑非 0）
       
　　您能夠看到，會有一個半徑爲 10 的純藍的圓在最中間，這就是設置目標圓半徑的效果。

　　如今我再改變一下，再也不是同心圓了，內圓圓心向右 20px 偏移。

　　清單 17. 徑向漸變（目標圓圓心偏移）　　

backgroud:  -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));

　　這裏咱們給目標圓半徑仍是 10，可是圓心偏移爲「70，50」（起始圓圓心爲「50，50」）效果圖以下：

　　圖 11. 徑向漸變（目標圓圓心偏移）
       
　　想必您明白原理了，咱們能夠作一個來自頂部的漫射光，相似於開了盞燈：

　　清單 18. 徑向漸變（漫射光）　　

backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

　　其效果以下：

　　圖 12. 徑向漸變（漫射光）
        
　　CSS3 的陰影（Shadow）和反射（Reflect）效果

　　首先來講說陰影效果，陰影效果既可用於普通元素，也可用於文字，參考以下代碼：

　　清單 19. 元素和文字的陰影　　

.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}

.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}

　　設置很簡單，對於文字陰影：表示 X 軸方向陰影向右 5px,Y 軸方向陰影向下 2px， 而陰影模糊半徑 6px，顏色爲 rgba(64, 64, 64, 0.5)。其中偏移量能夠爲負值，負值則反方向。元素陰影也相似。參考一下效果圖：

　　圖 13. 元素和文字的陰影效果圖
          
         
　　接下來咱們再來談談反射，他看起來像水中的倒影，其設置也很簡單，參考以下代碼：

　　清單 20. 反射　　

.classReflect{
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent),
     to(rgba(255, 255, 255, 0.51)));
}

　　設置也很簡單，你們主要關注「-webkit-box-reflect: below 10px」，他表示反射在元素下方 10px 的地方，再配上漸變效果，可見效果圖以下：

　　圖 14. 反射效果圖
       
　　CSS3 的背景效果

　　CSS3 多出了幾種關於背景（background）的屬性，咱們這裏會簡單介紹一下：

　　首先：「Background Clip」，該屬肯定背景畫區，有如下幾種可能的屬性：

　　* background-clip: border-box; 背景從 border 開始顯示 ;

　　* background-clip: padding-box; 背景從 padding 開始顯示 ;

　　* background-clip: content-box; 背景顯 content 區域開始顯示 ;

　　* background-clip: no-clip; 默認屬性，等同於 border-box;

　　一般狀況，咱們的背景都是覆蓋整個元素的，如今 CSS3 讓您能夠設置是否必定要這樣作。這裏您能夠設定背景顏色或圖片的覆蓋範圍。

　　其次：「Background Origin」，用於肯定背景的位置，它一般與 background-position 聯合使用，您能夠從 border、padding、content 來計算 background-position（就像 background-clip）。

　　* background-origin: border-box; 從 border. 開始計算 background-position;

　　* background-origin: padding-box; 從 padding. 開始計算 background-position;

　　* background-origin: content-box; 從 content. 開始計算 background-position;

　　還有，「Background Size」，經常使用來調整背景圖片的大小，注意別和 clip 弄混，這個主要用於設定圖片自己。有如下可能的屬性：

　　* background-size: contain; 縮小圖片以適合元素（維持像素長寬比）

　　* background-size: cover; 擴展元素以填補元素（維持像素長寬比）

　　* background-size: 100px 100px; 縮小圖片至指定的大小 .

　　* background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸 .

　　最後，「Background Break」屬性，CSS3 中，元素能夠被分紅幾個獨立的盒子（如使內聯元素 span 跨越多行），background-break 屬性用來控制背景怎樣在這些不一樣的盒子中顯示。

　　* background-break: continuous; 默認值。忽略盒之間的距離（也就是像元 素沒有分紅多個盒子，依然是一個總體一 樣）

　　* background-break: bounding-box; 把盒之間的距離計算在內；

　　* background-break: each-box; 爲每一個盒子單獨重繪背景。

　　這種屬性讓您能夠設定複雜元素的背景屬性。

　　最爲重要的一點，CSS3 中支持多背景圖片，參考以下代碼：

　　清單 21. 多背景圖片　

div {
background: url(src/zippy-plus.png) 10px center no-repeat,
 url(src/gray_lines_bg.png) 10px center repeat-x;
}

　　此爲同一元素兩個背景的案例，其中一個重複顯示，一個不重複。參考一下效果圖：

　　圖 15. 多背景圖片
        
　　CSS3 的盒子模型

　　盒子模型爲開發者提供了一種很是靈活的佈局方式，可是支持這一特性的瀏覽器並很少，目前只有 webkit 內核的新版本 safari 和 chrome 以及 gecko 內核的新版本 firefox。

　　下面咱們來介紹一下他是如何工做的，參考以下代碼：

　　清單 22. CSS3 盒子模型　

  

       1
  

  

       2
  

  

       3
  

  

       4
  

　　默認狀況下，若是「boxcontainer」和「item」兩個 class 裏面沒有特殊屬性的話，因爲 div 是塊狀元素，因此他的排列應該是這樣的：

　　圖 16. CSS3 盒子模型效果圖
        
　　下面，咱們加入相關 CSS3 盒子模型屬性：

　　清單 23. CSS3 盒子模型（水平排列）　　

.boxcontainer {
    width: 1000px;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
}

.item {
    background: #357c96;
    font-weight: bold;
    margin: 2px;
    padding: 20px;
    color: #fff;
    font-family: Arial, sans-serif;
}

　　注意這裏的「display: -webkit-box; display: -moz-box;」，它針對 webkit 和 gecko 瀏覽器定義了該元素的盒子模型。注意這裏的「-webkit-box-orient: horizontal;」，他表示水平排列的盒子模型。此時，咱們會看到以下效果：

　　圖 17. CSS3 盒子模型（水平排列）效果圖
        
　　細心的讀者會看到，「盒子」的右側多出來了很大一塊，這是怎麼回事呢？讓咱們再來看一個比較有特色的屬性：「flex」， 參考以下代碼：

　　清單 24. CSS3 盒子模型（flex）　　

　　

　　　　1
　　

　　

　　　　2
　　

　　

　　　　3
　　

　　

　　　　4
　　

.flex {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

　　您看到什麼區別了沒？在第四個「item 元素」那裏多了一個「flex」屬性，直接來看看效果吧：

　　圖 18. CSS3 盒子模型（flex）效果圖
         
　　第四個「item 元素」填滿了整個區域，這就是「flex」屬性的做用。若是咱們調整一下「box-flex」的屬性值，並加入更多的元素，見以下代碼：

　　清單 25. CSS3 盒子模型（flex 進階）　

   

        1
   

   

        2
   

   

        3
   

   

        4
   

.flex {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

.flex2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
}

　　咱們把倒數第二個元素（元素 3）也加上「box-flex」屬性，並將其值設爲 2，可見其效果圖以下：

　　圖 19. CSS3 盒子模型（flex 進階）效果圖
         
　　因而可知，元素 3 和元素 4 按比例「2:1」的方式填充外層「容器」的餘下區域，這就是「box-flex」屬性的進階應用。

　　還有，「box-direction」能夠用來翻轉這四個盒子的排序，「box-ordinal-group」能夠用來改變每一個盒子的位置：一個盒子的 box-ordinal-group 屬性值越高，就排在越後面。盒子的對方方式能夠用「box-align」和「box-pack」來設定。

　　CSS3 的 Transitions, Transforms 和 Animation

　　Transitions

　　先說說 Transition，Transition 有下面些具體屬性：

　　transition-property：用於指定過渡的性質，好比 transition-property:backgrond 就是指 backgound 參與這個過渡

　　transition-duration：用於指定這個過渡的持續時間

　　transition-delay：用於制定延遲過渡的時間

　　transition-timing-function：用於指定過渡類型，有 ease linear ease-in ease-out ease-in-out cubic-bezier

　　可能您以爲摸不着頭腦，其實很簡單，咱們用一個例子說明，參看一下以下代碼：

　　清單 26. CSS3 的 Transition　　

transition

.transStart {
   background-color: white;
   -webkit-transition: background-color 0.3s linear;
   -moz-transition: background-color 0.3s linear;
   -o-transition: background-color 0.3s linear;
   transition: background-color 0.3s linear;
}
.transEnd {
   background-color: red;
}

　　這裏他說明的是，這裏 id 爲「transDiv」的 div，當它的初始「background-color」屬性變化時（被 JavaScript 修改），會呈現出一種變化效果，持續時間爲 0.3 秒，效果爲均勻變換（linear）。如：該 div 的 class 屬性由「transStart」改成「transEnd」，其背景會由白（white）漸變到紅（red）。

　　Transform

　　再來看看 Transform，其實就是指拉伸，壓縮，旋轉，偏移等等一些圖形學裏面的基本變換。見以下代碼：

　　清單 27. CSS3 的 Transform　　

.skew {
-webkit-transform: skew(50deg);
}

.scale {
-webkit-transform: scale(2, 0.5);
}

.rotate {
-webkit-transform: rotate(30deg);
}

.translate {
-webkit-transform: translate(50px, 50px);
}

.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}

　　「skew」是傾斜，「scale」是縮放，「rotate」是旋轉，「translate」是平移。最後須要說明一點，transform 支持綜合變換。可見其效果圖以下：

　　圖 20. CSS3 的 Transform 效果圖
         　　如今您應該明白 Transform 的做用了吧。結合咱們以前談到的 Transition，將它們二者結合起來，會產生相似旋轉，縮放等等的效果，絕對能使人耳目一新。　　Animation　　最後，咱們來講說 Animation 吧。它能夠說開闢了 CSS 的新紀元，讓 CSS 脫離了「靜止」這一約定俗成的前提。以 webkit 爲例，見以下代碼：　　清單 28. CSS3 的 Animation　　@-webkit-keyframes anim1 {   0% {       Opacity: 0;Font-size: 12px;   }   100% {       Opacity: 1;Font-size: 24px;   }}.anim1Div {   -webkit-animation-name: anim1 ;   -webkit-animation-duration: 1.5s;   -webkit-animation-iteration-count: 4;   -webkit-animation-direction: alternate;   -webkit-animation-timing-function: ease-in-out;}　　首先，定義動畫的內容，如清單 28 所示，定義動畫「anim1」，變化方式爲由「透明」（opacity: 0）變到「不透明」（opacity: 1），同時，內部字體大小由「12px」變到「24px」。而後，再來定義 animation 的變化參數，其中，「duration」表示動畫持續時間，「iteration-count」表示動畫重複次數，direction 表示動畫執行完一次後方向的變化方式（如第一次從右向左，第二次則從左向右），最後，「timing-function」表示變化的模式。　　其實，CSS3 動畫幾乎支持全部的 style 變化，能夠定義各類各樣的動畫效果以知足咱們用戶體驗的須要。　　這裏，咱們介紹了 CSS3 的主要的新特性，這些特性在 Chrome 和 Safari 中基本都是支持的，Firefox 支持其中的一部分，IE 和 Opera 支持的較少。讀者們能夠根據集體狀況有選擇的使用。　　結束語　　本文介紹了 Web 開發中關於 CSS3 的一些內容，由淺入深的逐步引出 CSS3 的各類相關屬性。基於各個 CSS3 屬性的原理，經過實際的源代碼介紹各個 CSS3 新特性的特色，使用方式以及使用中須要注意的地方。在每一個新特性的代碼示例後面，經過示例圖，給 Web 開發人員一種比較直觀的視覺感覺。在 Web2.0 愈來愈流行的今天，熟練掌握並能很好的運用 CSS3 的一些特性會給咱們的項目帶來史無前例的用戶體驗效果。