經常使用的css3的新屬性

       做爲前端開發人員，若是你還不知道或尚未接觸過CSS3，那麼你真的OUT了！就像蒸汽機的發明標誌工業革命的開始同樣，CSS3和HTML5的出現，將會帶來WEB前端開發以及互聯網的一場重要變革！

         那麼如今我就爲你們簡但的介紹下經常使用的css3裏面的新屬性：

一.選擇器：

        css選擇器，css的選擇器多樣且靈活，但你要是想讓設計師更方便的維護樣式表。就要合理的運用他們。三個新的屬性選擇器添加到出生css3中。

• 匹配包含以特定的值開頭的屬性的元素

• [att$="value"]
  匹配包含以特定的值結尾的屬性的元素

• [att*="value"]
  匹配包含含有特定的值的屬性的元素

瀏覽器支持:只有IE6不支持CSS的屬性選擇器。IE7和IE八、Opera、Webkit核心和Gecko核心的瀏覽器都支持。因此在你的樣式中使用屬性選擇器是比較安全的。

2.僞類:

• :nth-child(n)
  讓你基於元素在父節點的子元素的列表位置來指定元素。你能夠是用數字、數字表達式或odd 和even 關鍵詞(對斑馬樣式的列表很完美)。你能夠簡單的這樣使用：

:nth-child(2n){background-color：#cf9}/*匹配2的倍數的子元素*/

• :last-child
  匹配一個父節點下的最後一個子元素，等同於:nth-last-child(1

瀏覽器支持: Webkit核心和Opera 瀏覽器支持全部新的CSS3 僞類，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled，可是Firefox 3.5 將更加普遍的支持CSS3 選擇器。Trident核心瀏覽器(Internet Explorer)事實上不支持這些僞選擇器。

3.僞元素

    在CSS3中惟一引入的僞元素是::selection.它可讓你指定被用戶高亮（選中）的元素。

瀏覽器支持: 目前沒有任何一款Internet Explorer 或Firefox 瀏覽器支持::selection 僞元素。Safari, Opera 和Chrome 均支持。

2、RGBA和透明度

    RGBA 讓你能夠不只僅設定色彩，還能設定元素的透明。一些瀏覽器尚不支持它，因此最好在RGBa前面設定其它瀏覽器支持的沒有透明的顏色屬性。

    #networks li a:focus {   
    background: rgba(164, 173, 183, .15);   
    }

瀏覽器支持: RGBA 被Webkit內核瀏覽器支持。IE全部版本都不支持。Firefox 2也不支持，可是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的瀏覽器支持。IE全部版本一樣不支持。IE只支持自家的該死的濾鏡（filter）。

3、多背景圖

    CSS3 容許你使用多個屬性好比background-image、background-repeat, background-size, background-position, background-originand background-clip等在一個元素上添加多層背景圖片。如：

   div {   
    background: url(example.jpg) top left no-repeat,   
        url(example2.jpg) bottom left no-repeat,   
        url(example3.jpg) center center repeat-y;   
    } 

瀏覽器支持: 目前，多背景圖片只在Safari/chrome 和Konqueror中有效

4、文字陰影 

    儘管在CSS2中就已經存在，text-shadow是一個未被普遍應用的CSS屬性。可是它將在CSS3中被普遍採用。這個屬性給設計師一個新的跨瀏覽器的工具來爲設計添加一個維度以使文字醒目。

儘管這樣，你須要確認，你的設計中的文字是可讀的，以防用戶的瀏覽器不支持CSS3高級屬性。給文字和背景色彩足夠的對比度以防text-shadow 屬性不能被瀏覽器正確渲染或理解。

瀏覽器支持: Webkit核心瀏覽器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它，Firefox 將在即將發行的3.5版本中支持。

5、@font-face屬性

   儘管是最被期待的CSS3 特性 (甚至它在CSS2中就已經被引入了)， @font-face在網站上仍然沒有像其它CSS3屬性那樣被普遍採用.這主要由於字體受權和版權問題：嵌入的字體很容易從網站上下載到，這是字體廠商的主要顧慮。

瀏覽器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持EOT 字體。 Opera 10 和Firefox 3.5 將會支持它。

6、圓角（邊框半徑）

    Border-radius 無需背景圖片就能給HTML元素添加圓角。如今，它多是使用最多的CSS3屬性了，很簡單的緣由是使用圓角比較好並且不會對設計和可用性有衝突。

瀏覽器支持： border-radius只有全部版本的IE瀏覽器和Opera不支持，Webkit和Gecko核心的瀏覽器都支持。

7、邊框圖片 

    border-image 屬性容許你在元素的邊框上設定圖片， 讓你從一般的solid, dotted 和其它邊框樣式中解放出來。該屬性給設計師一個更好的工具，用它能夠方便的定義設計元素的邊框樣式，比background-image 屬性(對高級設計來講) 或枯燥的默認邊框樣式更好用。咱們也能夠明確的定義一個邊框能夠被如何縮放或平鋪。

瀏覽器支持: border-image 目前只有Webkit核心瀏覽器支持。

8、盒陰影

    box-shadow 屬性能夠對HTML元素添加陰影 而不用額外的標籤或背景圖片。相似text-shadow 屬性，它加強設計的細節；並且由於它不影響內容的可讀性，隨意他能夠是增長那種額外感受/效果的一種很好的方法。如：

   #navigation {   
    -webkit-box-shadow: 0 0 10px #000;   
    -moz-box-shadow: 0 0 10px #000;   
    }   

瀏覽器支持: box-shadow目前只有Webkit核心瀏覽器支持，可是即將發佈的Firefox 3.5 也將提供很好的支持。

9、盒子大小

    根據CSS 2.1 規範，在計算盒子的總大小的時候，元素的邊框和padding應該被加入到寬度和高度之中的。可是衆所周知，舊的瀏覽器卻以它們本身的很是有「創意」的方式來解釋這個規範。box-sizing屬性容許你指定瀏覽器如何計算一個元素的寬度和高度。

瀏覽器支持：box-sizing 被IE八、Opera、Gecko核心和Webkit核心瀏覽器支持。

10、媒體查詢

   媒體查詢（media queries）可讓你爲不一樣的設備基於它們的能力定義不一樣的樣式。好比，在可視區域小於480像素的時候，你可能想讓網站的側欄顯示在主內容的下邊，這樣它就不該該浮動並顯示在右側了： 

   #sidebar {   
    float: right;   
    display: inline; /* IE Double-Margin Bugfix */  
    }   
  
@media all and (max-width:480px) {   
    #sidebar {   
        float: none;   
        clear: both;   
        }   
    }

瀏覽器支持： 媒體查詢被基於webkit核心的瀏覽器和Opera支持。Firefox將在3.5版本中支持它。IE目前不支持這些屬性並且在未來的版本中，也沒有支持的計劃。

11、語音

   CSS3的語音模塊CSS3可讓你爲屏幕閱讀者指定語音樣式。你能夠控制語音的不一樣設置，好比:

• voice-volume
  使用從0到100的數字(0 即靜音)、百分數或關鍵詞(silent,x-soft,soft,medium,loud 和x-loud等)來設置音量。

• voice-balance
  控制來自哪一個聲道(若是用戶的音箱系統支持立體聲)。

• Speak
  指示屏幕閱讀器閱讀相關的文字、數字或標點符號。可用的關鍵詞爲none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit.

• Pauses and rests
  在一個元素的被讀完以前或以後設定暫停或中止。你可使用時間單位(好比, 「2s」 表示2 秒鐘) 或關鍵詞(none,x-weak, weak, medium, strong 和x-strong)。

• Cues
  使用聲音限制特定元素並控制器音量。

• voice-family
  設定特定的聲音類型和聲音合成(就像font-family)。

• voice-rate
  控制閱讀的速度。能夠設置爲百分數或關鍵詞: x-slow, slow,medium, fast 和x-fast.

• voice-stress
  指示應該使用的任何重音(強語氣)，使用不一樣的關鍵詞: none, moderate,strong 和 reduced.

瀏覽器支持: 如今，只有Opera 瀏覽器（Windows XP and 2000）支持語音模塊的部分屬性。爲了使用它們，須要使用-xv- 前綴，好比-xv-voice-balance: right。