CSS3為web設(shè)計增添了許多令人驚嘆的特性，這其中你經(jīng)常會用到box-shadow（圖層陰影），border-radius（邊框圓角），transform（變形）這一類受歡迎的常用特性。但是還有一些強大的功能，你可能沒有接觸到，它們就象是埋藏在地下的寶藏，靜靜等待著你的發(fā)掘。

W3C正不斷致力于為設(shè)計師、開發(fā)人員和用戶開發(fā)新的CSS特性，下面我們就來看看你可能不知道的CSS3中的10個隱藏特性：

1.Tab尺寸控制

大多數(shù)代碼編輯器配有Tab尺寸控制，開發(fā)者可以對指定代碼的縮進所使用的Tab鍵的寬度進行控制。而現(xiàn)在，這個功能已經(jīng)對嵌入在網(wǎng)頁的定制代碼開放了。

注意，每個瀏覽器可能都有對Tab占用寬度的不同說明。所以，我們在不同的瀏覽器上會看到一些差異。我目前所知道的支持這個功能的瀏覽器包括：Chrome，Opera，F(xiàn)irefox和Safari。

2.文本渲染

文本渲染的特性可以讓瀏覽器知道如何在網(wǎng)頁中渲染文本。文本優(yōu)化所涉及的性能、易讀性、精度將會決定到文本的質(zhì)量?？纯聪旅娼貓D兩個版本的字距調(diào)整，來辨別一下“正常”版和“易讀性優(yōu)化”版的差別吧。

3.字體伸縮

除了常規(guī)的正常，粗體和斜體，其它的字體設(shè)置也會提供不一樣的感官設(shè)計。Helvetica Neue或者Myriad Pro字體就是其中的例子，對于字體的伸縮程度，它們有“Condensed”，“Ultra-condensed”，和“Semi-condensed”幾種設(shè)置，這些都可以通過一個名為font-stretch（字體伸縮）的特性來實現(xiàn)。

我們可以使用字體伸縮結(jié)合文字特性（比如使用字體樣式），舉一個例子：

font-stretch（字體伸縮）特性目前只能在Firefox和Internet Explorer 9（及以上版本）使用。

4.文字溢出

文字溢出特性指定了容器中溢出或者被截斷內(nèi)容的呈現(xiàn)方式。默認的處理方式是截斷，被截斷的內(nèi)容會被隱藏起來。你可以設(shè)置用省略號來代表被截斷的文本或者進行省略。如下圖所示：

正如你所想的，末尾三個點的省略號代表了被省略的內(nèi)容。

5.書寫模式

并不是每一種語言都是從左到右的書寫的，有一些語言是從上到下的比如日語，還有一些語言是從右到左的比如阿拉伯語和希伯來語。

為了適應(yīng)這些語言，CSS引入了名為書寫模式的新特性來幫助開發(fā)人員改變內(nèi)容的書寫方向。例如，這個代碼片斷就是讓本文書寫的內(nèi)容保持從左到右的順序（無論什么語言）

改變文本內(nèi)容的順序為從上到下，這可以通過設(shè)置為vertical-l,r來實現(xiàn)：

6.指針事件

pointer-events（指針事件）屬性可以讓開發(fā)人員控制鼠標指針在拖下，懸停和點擊等事件下的行為。使用下圖的命令后，指針點擊鏈接將不會產(chǎn)生任何效果，鏈接會被完全禁用，而href標簽中所指定的地址位置也會成為擺設(shè)。

關(guān)于指針事件的一些關(guān)鍵問題將會在下一個版本CSS4中得到解決。

7.圖片定向

在Photoshop等圖片編輯器里，你可以通過旋轉(zhuǎn)或翻轉(zhuǎn)等改變圖片的方向。現(xiàn)在，CSS3中的image-orientation（圖片定向）功能可以讓你可以對網(wǎng)頁上的圖片完成同樣的處理。這里是一個如何讓圖片進行水平翻轉(zhuǎn)的例子：

你可以通過恢復鏡像（from-image）來保留原來圖片的方向：

8.圖片渲染

類似于文本渲染特性，圖像渲染定義了網(wǎng)頁上的圖片質(zhì)量，特別是可改變圖片的大小。這個特性是由一堆數(shù)值組成的，不同的瀏覽器對于這些數(shù)值的設(shè)定都不一樣。比如，crisp-edges這個用于保存圖片對比度并可預防圖片邊緣模糊的特性在Chrome極速瀏覽器里會使用webkit-optimize-contrast，而在IE瀏覽器里會使用nearest-neighbor。

這是一項實驗性技術(shù)，實施得到的結(jié)果有隨著技術(shù)的不同而產(chǎn)生微小的變化。

9.列屬性

列屬性可以使開發(fā)者輕松的把web內(nèi)容排列成列，我們把內(nèi)容分成兩列，如下所示：

當瀏覽器支持這個特性的時候，比如在Chrome和Safari中，我們就會看到以下內(nèi)容的排列：

CSS這個特性上再加上一些創(chuàng)造力，你就可以輕松的創(chuàng)建一個與時尚雜志相似的擁有靈活流體布局和誘人內(nèi)容布局的網(wǎng)站了。

10.flex流動布局

flex的特性旨在構(gòu)建更加無縫化的響應(yīng)式網(wǎng)格并同時解決關(guān)于主流網(wǎng)絡(luò)布局使用浮動屬性所產(chǎn)生的一系列問題。除此之外，使用flex特性，網(wǎng)絡(luò)布局將完全延伸至整個容器，這在以前是一件相當煩瑣的事情。

現(xiàn)在，假如你想要構(gòu)建一個三列的web布局，你可以這樣安排：

然后，使用flex構(gòu)建列屬性，像這樣操作：

附加字體和背景顏色的裝飾，我們將得到以下結(jié)果：

本文翻譯自

【年終大促 巔峰盛“慧” 】促銷火熱進行中 iPhone 6 Plus、 iPhone 6、iPad Air等你拿 <<;<<點擊查看

【FastReport VCL 5新版發(fā)布會 】2014-12-9 15:00網(wǎng)絡(luò)直播，免費參加  ，參加者買FastReport全線產(chǎn)品6折!