一些CSS3新技術

時間 2019-11-08

標籤一些 css3 css 新技術欄目 CSS 简体版

原文原文鏈接

前些日子在SmashingMagazine看到一篇關於CSS3新技術不錯的文章，它詳細介紹了CSS3的新特性和它的使用方法，它包括:瀏覽器專有屬性、選擇器(屬性選擇器、連字符、僞類、僞元素)、RGBA和透明度屬性、多欄佈局、多背景圖、Word Wrap、文字陰影、CSS圓角、邊框圖片、盒陰影、盒尺寸、媒體查詢、語音，並詳細說明了每一個新技術目前有哪些瀏覽器兼容。php

級聯樣式表在13年前被引入，並且被普遍使用的CSS 2.1 標準在11年前被建立，顯然咱們如今已經與當年相差千里了。至關了不得的是期間網站開發有了多少進步——事實上，咱們也沒法想象。css

爲何會這樣呢，當提到CSS的時候，過去咱們是如此的不情願和懼怕嘗試？爲何咱們還要使用討厭的hack和依賴JavaScript的技術來寫樣式？爲何咱們不能利用豐富的CSS3 特性和現代瀏覽器中可用的工具並將咱們的設計品質帶到下一個等級？html

是時候在咱們的項目中引入CSS3 特性了，不用懼怕逐漸在咱們的樣式表中加入css3特性和選擇器會出問題。讓咱們的客戶意識到CSS3的優點 (並且讓舊瀏覽器更快的消失)是咱們力所能及的事情——咱們應該這樣作，特別是在它可以讓網站更加靈活並減小開發和維護成本的時候。前端

在本文中，咱們將研究CSS3的優點，並看一下一些網頁設計師是如何使用它們的。最後，咱們將瞭解到從CSS3中咱們能獲得什麼以及咱們如何在咱們的項目中使用它的新特性。jquery

同時請參考咱們以前的一篇相關文章：
使用CSS3將你的網站設計推向將來css3

使用瀏覽器專有屬性

爲了使用大部分CSS3特性，咱們不得不與原來的屬性一塊兒使用生產商專有擴展。緣由是直到如今，大部分瀏覽器只支持部分CSS3屬性。並且不幸的是，一些屬性甚至到最後均可能不被W3C推薦，因此經過指定瀏覽器專有屬性，將他們與標準屬性區分開來是很重要的(而後在他們是多餘的的時候使用符合標準的樣式將之覆蓋)。git

固然，這種方法的劣勢是，將致使一個雜亂的樣式表和網站在瀏覽器之間的表現不一致。畢竟，咱們不想在咱們的樣式表中重拾私有瀏覽器hack的需求。Internet Explorer的臭名昭著的marquee、blink以及其它標籤在大量樣式表中被應用，並在20世紀九十年代成爲一個傳奇；它們依然讓現存的不少網站（在其餘瀏覽器中）表現不一致甚至難以閱讀。而咱們如今也不想將咱們本身置於一樣的境地，對吧？github

然而，網站不須要在全部的瀏覽器中看起來必須嚴格的一致。有的時候在某個瀏覽器中使用私有屬性來實現特定的效果是可行的。web

最多見的私有屬性是用於Webkit核心瀏覽器的(好比, Safari)，它們以-webkit-開始，以及Gecko核心的瀏覽器(好比, Firefox)，以-moz-開始，還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們本身的屬性擴展（目前只有IE8支持-ms-前綴）chrome

做爲專業的設計師，咱們不得不注意：使用這些私有屬性將讓咱們的樣式表不能經過驗證。因此目前將他們放到最終版的樣式中是少見的。可是在某種狀況下，好比試驗或學習，咱們至少能夠考慮將他們和標準的CSS屬性一塊兒寫到一個樣式表中。

擴展閱讀

1. 選擇器

CSS選擇器是個難以置信地強大的工具：它們容許咱們在標籤中指定特定的HTML元素而沒必要使用多餘的class、 ID 或JavaScripts。並且它們中的大部分並非CSS3中新添加的，而是沒有被獲得應有的普遍應用。若是你在嘗試實現一個乾淨的、輕量級的標籤以及結構與表現更好的分離，高級選擇器是很是有用的。它們能夠減小在標籤中的class和ID的數量並讓設計師更方便的維護樣式表。

屬性選擇器

三個新的屬性選擇器被添加到CSS3：

[att^="value"]
匹配包含以特定的值開頭的屬性的元素
[att$="value"]
匹配包含以特定的值結尾的屬性的元素
[att*="value"]
匹配包含含有特定的值的屬性的元素

值的屬性的元素

tweetCC 使用一個屬性選擇器來指定有title屬性並以字符「tweetCC」結尾的連接:

a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}

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

連字符

CSS3中惟一新引入的連字符是通用的兄弟選擇器（同級）。它針對一個元素的有同一個父級節點的全部兄弟級別元素。

好比，給某個特定的div的同級的圖片添加一個灰色的邊框(div和圖片應該有同一個父級節點)，在樣式表中定義下面的樣式就足夠了：

div~img {
border: 1px solid #ccc;
}

瀏覽器支持：全部的主要瀏覽器都支持這個通用的兄弟選擇器除了咱們最愛的IE6！

僞類

或許在CSS3中增長最多的就是新的僞類了，這裏是一些最有趣和最有用的：

:nth-child(n)
讓你基於元素在父節點的子元素的列表位置來指定元素。你能夠是用數字、數字表達式或odd 和even 關鍵詞(對斑馬樣式的列表很完美)。因此若是你想匹配在第四個元素以後的一個3個元素的分組，你能夠簡單的這樣使用：

1	:nth-child(3n+4) { background-color: #ccc; }/匹配第4,7,10,13,16,19...個元素/

:nth-last-child(n)
與上個選擇器的思想一樣，可是從後面匹配元素（倒序），好比，爲了指定一個div裏面的最後兩個段落，咱們可使用下面的選擇器：

1

div p:nth-last-child(-n+2)
:last-child
匹配一個父節點下的最後一個子元素，等同於:nth-last-child(1)
:checked
匹配選擇的元素，好比複選框
:empty
匹配空元素（沒有子元素）。
:not(s)
匹配全部不符合指定聲明(s)的元素。好比，若是你想讓全部的沒有使用」lead」類的段落的顯示爲黑色，能夠這樣寫：
p:not([class*="lead"]) { color: black; }
.

Andrea Gandino 在他的網站上使用:last-child 爲選擇器指定每篇日誌的最後一個段落，並將其的外間距(margin)設置爲0:

#primary .text p:last-child {
margin: 0;
}

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

僞元素

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

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

擴展閱讀

2. RGBA和透明度

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

Tim Van Damme在連接的hover效果上使用了RGBA

在這個網站上，Tim Van Damme在鼠標懸停效果上使用了RGBa；例如，在他的首頁的network連接上:

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

當設定一個RGBA 色彩的時候，咱們必須依次設定紅、藍、和綠色的值，能夠是0-255或百分數。透明值應該在0.0到1.0之間，例如0.5 表明50% 的透明度。

RGBA 和opacity 之間的不一樣是前者只會應用到指定的元素上，然後者會影響咱們指定的元素及其子元素。

這裏有個例子展現咱們如何給一個div添加80% 透明:

div {
opacity: 0.8;
}

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

擴展閱讀：

3. 多欄佈局

這是新的CSS3 選擇器可讓你不用使用多個div標籤就能實現多欄佈局。瀏覽器解釋這個屬性並生成多欄，讓文本實現一個仿報紙的多欄結構。

tweetCC 在其首頁使用了CSS3 多欄選擇器

tweetCC 在其首頁上將介紹文字顯示爲四欄。這四欄並不是浮動的div；相反，設計師使用下面的CSS3 多欄佈局：

.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}

咱們能夠經過這個選擇器定義三件事情：欄數(column-coun)、欄寬(column-width、例子中沒有用到)和各欄之間的空白/間距(column-gap)。若是column-count未設定，瀏覽器會在容許的寬度內容納儘量多的欄目。

爲了在各欄時間添加一個數值的分隔，咱們可使用column-rule 屬性，其功能和border 屬性相似:

div {
column-rule: 1px solid #00000;
}

上面的這條屬性，瀏覽器中不會看到任何效果，由於它沒有分欄，若是配合上面的例子就能夠了。

相關屬性: column-break-after, column-break-before, column-span, column-fill.

瀏覽器支持: 多欄佈局目前被Safari 3+，chrome，和Firefox 1.5+所支持。

擴展閱讀：

4. 多背景圖

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

在一個元素上添加多背景的最簡單的方法是使用簡寫代碼，你能夠指定上面的全部屬性到一條聲明中，只是最經常使用的仍是image, position 和repeat:

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

第一個圖片將是離用戶「最近」的那個。

該屬性的一個更復雜的版本能夠是這樣的：

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

在這裏，(100% 2em) 是background-size 的值；第一個背景圖片將會出如今左上角並會被拉伸至該div的100%寬度和2em的高度。

由於只有少數的瀏覽器支持它，又由於在網站上不顯示背景有損網站的視覺效果，因此，這並非一個被普遍應用了的屬性。儘管如此，它顯然可以大大地提升設計師的工做流並顯著減小標籤數量——相對於用其它方式實現一樣的效果。

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

擴展閱讀：

5. Word Wrap

word-wrap 屬性用來防止太長的字符串溢出的。能夠用兩個屬性值normal 和break-word。normal 值(默認的) 只在容許的斷點截斷文字，如連字符。若是使用了break-word ，文字能夠在任何須要的地方截斷以匹配分配的空間並防止溢出。

WordPress 後臺在數據表中使用了word-wrap.

在WordPress 的控制面板中，word-wrap 屬性被用於表格中的元素；好比在日誌和頁面的列表中：

.widefat * {
word-wrap: break-word;
}

瀏覽器支持： word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 將在3.5版本中支持它。

擴展閱讀：

6. 文字陰影

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

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

Beakapp 在它的網站中使用了text-shadow 屬性：內容區域.

BeakApp.com 爲內容區域使用了text-shadow 屬性，爲文字添加深度和維度並讓它變得醒目——而不是使用某種圖片替換技術。該屬性目前只在Safari和Chrome中可用。

該網站的主菜單使用的CSS以下：

.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

這裏咱們使用陰影顏色(使用了RGBA，前面有描述)，而後是右(x 座標) 和底部(y 座標) 偏移，最後是模糊半徑

若是要在一個文字上使用多陰影，可使用逗號分開。好比：

p {
  text-shadow: red 4px 4px 2px,
  yellow -4px -4px 2px,
  green -4px 4px 2px;
  }

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

擴展閱讀：

7. @font-face屬性

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

儘管如此，受權我呢提貌似已經開始解決了。TypeKit 承諾將制定一個方案，以使設計師和字體廠商更容易的統一受權問題，這將顯著的充實網站設計中的排版並使@font-face 屬性在實際工做中可用。

Mozilla實驗室JetPack 網站採用font-face規則來使用DroidSans 字體。

少數使用該屬性的網站之一是新上線的JetPack MozillaLabs.

@font-face{
font-family: 'DroidSans';
src: url('../fonts/DroidSans.ttf') format('truetype');
}

要想在你的網站中使用嵌入字體，你必須獨立的生命每一個樣式(好比， normal, bold 和italic)。請確保只使用被受權爲使用到網站的字體並在須要的時候給字體的設計師一些表揚。

在定義了@font-face 規則以後，你就能夠用普通的font-family 屬性來引用該字體了：

p {
font-family: "DroidSans";
}

若是一個瀏覽器不支持@font-face，它將使用font-family(CSS 字體庫)屬性中指定的下一個字體。對支持的瀏覽器來講，若是@font-face 字體是一個奢侈品（只有少數元素用到），這對一些網站是可行的；可是若是該字體在設計中佔有一個主要的角色或者是公司的視覺特徵的一部分，你就可能想使用其它的解決方案，好比sIFR 或Cufón。儘管如此，請記住，這些工具對標題或較短的文字更適合，複製和粘貼此類內容比較困難並且對用戶並不友好。

在網站中使用此類字體不是很好嗎？Dave Shea 使用Cufón 和Museo Sans來作的實驗。很漂亮！

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

擴展閱讀：

8. 圓角（邊框半徑）

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

不一樣於添加Javascript或多於的HTML標籤，僅僅須要添加一些CSS屬性並從好的方面考慮。這個方案是清晰的和比較有效的，並且可讓你免於花費幾個小時來尋找精巧的瀏覽器方案和基於Javascript圓角。

Sam Brown的博客在標題、分類和連接處使用了border-radius.

Sam Brown在他的博客的標題、分類、連接和div中大量的使用了border-radius屬性。使用圖片來實現該效果將會比較費時的，這是在項目中使用CSS3屬性是提升開發效率的重要步驟的緣由之一

爲了給類別連接添加圓角，Sam 使用了下面的CSS片斷：

h2 span {
  color: #1a1a1a;
  padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
  }

咱們能夠作的更進一步，添加原始的CSS3 屬性和Konqueror 屬性擴展，以下:

h2 span {
  color: #1a1a1a;
  padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
  }

若是咱們想在咱們的元素中的某個特定的角上應用此屬性，咱們能夠單獨的指定每一個角：

div {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}

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

擴展閱讀：

9. 邊框圖片

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

SpoonGraphics 博客爲它的圖片邊框使用了border-image 屬性。

在SpoonGraphis blog中，border-image被用於圖片邊框，以下所示：

#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}

要想定義border-image，咱們必須指定圖片地址，圖片的那部分將被剪切並用於元素的每個邊上，以及圖片是否被縮放或平鋪。

爲了製做一個使用下面的圖片做爲邊框的div ，咱們應該使用下面的代碼(咱們將爲這個例子添加Opera 和Konqueror 支持):

div {
border-width: 18px 25px 25px 18px;
-webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
-moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
-o-border-image: url(example.png) 18 25 25 18 stretch stretch;
-khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
border-image: url(example.png) 18 25 25 18 stretch stretch;
}

該屬性的最後一個值能夠是stretch (默認), round (只有一個平鋪了整數倍的圖片被填充在容許的地方) 或repeat。在咱們的例子中，上下左右邊框圖片被拉伸。若是咱們只想頂部和底部邊框被拉伸，咱們可使用下面的CSS:

div {
(...)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}

咱們能夠能夠單獨的指定每個角，若是咱們想爲每個角使用不一樣的圖片：

div {
border-top-image: url(example.png) 5 5 stretch;
border-right-image: url(example.png) 5 5 stretch;
border-bottom-image: url(example.png) 5 5 stretch;
border-left-image: url(example.png) 5 5 stretch;
border-top-left-image: url(example.png) 5 5 stretch;
border-top-right-image: url(example.png) 5 5 stretch;
border-bottom-left-image: url(example.png) 5 5 stretch;
border-bottom-right-image: url(example.png) 5 5 stretch;
}

若是瀏覽器不支持border-image 屬性，它將無視這些屬性，並只應用定義的其它邊框屬性，好比border-width 和border-color.

瀏覽器支持: border-image 目前只有Webkit核心瀏覽器支持。不太肯定Firefox的下一個版本是否支持。

擴展閱讀：

10. 盒陰影

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

10to1 爲它的導航北京和hover狀態使用了box-shadow 屬性.

10to1 爲其導航區域增長的一個簡單的陰影並將該屬性應用於導航連接的hover效果:

#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
  }
  #navigation li a:hover,
  #navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
  }

box-shadow屬性能夠用多個值：水平偏移、垂直偏移、模糊半徑、伸展半徑和陰影顏色。水平和垂直偏移和陰影色使用的最多。

在一個div上應用紅色陰影，右邊和下邊偏移4px，無模糊，咱們可使用下面的代碼：

div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}

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

擴展閱讀：

11. 盒子大小

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

WordPress 在控制面板的全部的輸入框元素中使用border-box 屬性。

WordPress 後臺區域在它的全部text類型的input標籤和textarea標籤上使用了該屬性:

input[type="text"],
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

第三個屬性(-ms-box-sizing) 只有在Internet Explorer 8下有效。經過其餘選擇器，WordPress 的樣式表一樣添加了Konqueror 屬性： -khtml-box-sizing。

box-sizing 屬性能夠兩個值中的一個：border-box 和content-box。 Content-box如CSS2.1中的定義的那樣渲染寬度。Border-box 從設定的寬度和高度中扣除padding和邊框(如老式瀏覽器那樣。)。

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

擴展閱讀：

12. 媒體查詢

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

#sidebar {
  float: right;
  display: inline; /* IE Double-Margin Bugfix */
  }

@media all and (max-width:480px) {
  #sidebar {
  float: none;
  clear: both;
  }
  }

你也能夠指定使用慮色屏的設備：

a {
  color: grey;
}

@media screen and (color) {
a {
  color: red;
  }
  }

潛力是無限的。這個屬性是頗有用的由於你你不在須要必須爲不一樣的設備寫獨立的樣式表了，並且你也無需使用JS來肯定每一個用戶的瀏覽器的屬性和功能。一個實現一個靈活的佈局的更加流行的基於Javascript的方案是使用智能的流體佈局，讓佈局對於用戶的瀏覽器分辨率更加靈活。

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

擴展閱讀：

13. 語音

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.

好比，告訴屏幕閱讀器使用男聲讀取全部的h2 標籤，用左邊的喇叭，用軟調按照指定的聲音，能夠像下面這樣指定樣式：

h2 {
  voice-family: female;
voice-balance: left;
voice-volume: soft;
  cue-after: url(sound.au);
  }

不幸的是，這個屬性如今只有很是少的支持，可是顯然值得關注由於咱們能夠在未來提升咱們網站的易用性。

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

擴展閱讀：

結尾

CSS3 屬性能夠極大的提升你的工做流，讓一些最耗時的CSS任務不費吹灰之力就能搞定，而且可使用更好、更簡潔和更輕的代碼標籤。一些屬性還沒有被普遍的支持，甚至是最新的瀏覽器，但這並不意味着咱們不能用它們進行試驗或者爲使用先進瀏覽器的用戶更高級的功能和CSS樣式。

在這點兒上，請記住，培養咱們的用戶也一樣是有用和必須的：網站無需看起來在每一個瀏覽器裏都要保持一致，並且若是一個差別不（負面）影響美學和網站的可用性，它就應該是被考慮的。若是咱們繼續浪費大量的時間和金錢以使每一個細節絕對一致(而不是採用更靈活的和將來導向的方案)，用戶將沒有升級他們的瀏覽器的任何須要/動機，這樣咱們就不得不在舊的瀏覽器變爲古董級瀏覽器以及強大的現代瀏覽器變爲標準以前等待很長的時間

咱們試驗和使用新的CSS3屬性越早，它們就被流行的瀏覽器支持的更早，咱們也就可以更早的普遍使用它們。