雖然CSS并不是一種很復(fù)雜的技術(shù)，但就算你是一個使用CSS多年的高手，仍然會有很多CSS用法/屬性/屬性值你從來沒使用過，甚至從來沒聽說過。

1.CSS的color屬性并非只能用于文本顯示
對于CSS的color屬性，相信所有Web開發(fā)人員都使用過。如果你并不是一個特別有經(jīng)驗的程序員，我相信你未必知道color屬性除了能用在文本顯示，還可以用作其它地方。它可以把頁面上的所有的東西都變顏色。比如：
無法顯示的圖片的alt文字
list元素的邊框
無序list元素前面的小點
有序list元素前面的數(shù)字
還有hr元素

2.CSS里的visibility屬性有個collapse屬性值：collapse
對于CSS里的visibility屬性，相信你用過不下幾百次。大多時候，你會把它的值設(shè)置成visible(這是所有頁面元素的缺省值)，或者是hidden。后者相當(dāng)于display: none，但仍然占用頁面空間。
其實visibility可以有第三種值，就是collapse。當(dāng)一個元素的visibility屬性被設(shè)置成collapse值后，對于一般的元素，它的表現(xiàn)跟hidden是一樣的。但例外的是，如果這個元素是table相關(guān)的元素，例如table行，table group，table列，table column group，它的表現(xiàn)卻跟display: none一樣，也就是說，它們占用的空間也會釋放。
但遺憾的是，各種瀏覽器對collapse值的處理方式不一樣。

3.CSS的background簡寫方式里新增了新的屬性值
在CSS2.1里，background屬性的簡寫方式包含五種屬性值 – background-color, background-image,background-repeat, background-attachment, and background-position。從CSS3開始，又增加了3個新的屬性值，加起來一共8個。下面是按順序分別代表的意思：
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
注意里面的反斜杠，它更font和border-radius里簡寫方式使用的反斜杠的用法相似。反斜杠可以在支持這種寫法的瀏覽器里在position后面接著寫background-size。
除此之外，你開可以增加另外兩個描述它的屬性值： background-origin 和 background-clip.
它的語法用起來像下面這個樣子：
.example {
background: aquamarine url(img.png)
no-repeat
scroll
center center / 50%
content-box content-box;
}
關(guān)于瀏覽器的支持情況，大概所有的現(xiàn)代瀏覽器都支持這些新屬性值，但對于一些非常老舊的瀏覽器(IE6/7/8)，最好在代碼里提供一些萬一不支持的補救機制。

4.CSS的clip屬性只在絕對定位的元素上才會生效
之前說到了background-clip，你可能會想到clip屬性。它的用法是下面這個樣子：
.example { clip: rect(110px, 160px, 170px, 60px);}
它的作用是按指定的尺寸、規(guī)定的大小裁剪元素。很多簡單，但唯一你需要注意的事情是，clip只會在絕對定位的元素上生效。所有，你必須這樣做：
.example { position: absolute; clip: rect(110px, 160px, 170px, 60px);}
但是，你也可以將元素的position設(shè)置成position: fixed，因為，根據(jù)css官方規(guī)范，fixed的元素也屬于‘a(chǎn)bsolutely positioned’元素。

5.元素豎向的百分比設(shè)定是相對于容器的寬度，而不是高度
這是一個很讓人困惑的CSS特征，我之前也談到過它。我們大家都知道，當(dāng)按百分比設(shè)定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當(dāng)按百分比設(shè)定它們時，依據(jù)的也是父容器的寬度，而不是高度。

6.border屬性比你想象的要復(fù)雜
我們很多人都用過這樣的寫法：
.example { border: solid 1px black;}
這里的border屬性的用法實際上是一種簡寫的形式，它分別設(shè)置了border-style, border-width, 和border-color — 用一句代碼表示它們?nèi)齻€。
但不要忘記，border-style, border-width, 和border-color也都有自己的簡寫形式。所以，border-width可以寫成這樣：
.example { border-width: 2px 5px 1px 0;}
這樣，四個邊的寬度被一次設(shè)定。border-color 和 border-style 屬性也可以這樣做。

7.text-decoration屬性變成了屬性簡寫
我相信有些小知識會讓你大吃一驚。
跟著最新的CSS規(guī)范，text-decoration現(xiàn)在的寫法是這樣的：
a { text-decoration: overline aqua wavy;}
text-decoration屬性現(xiàn)在需要用三種屬性值來表示了：text-decoration-line,text-decoration-color, and text-decoration-style.
但不幸的是，目前只有火狐瀏覽器實現(xiàn)了對這些新屬性的支持。

8.border-width屬性可以使用預(yù)定義常量值
也許對與你來說這并不是一個什么新鮮信息。除了可以使用標(biāo)準(zhǔn)寬度值(例如5px或1em)外，border-width屬性可以接受預(yù)定義的常量值：medium, thin, 和 thick
事實上，如果你不給border-width屬性賦值，那它的缺省值是“medium”。

9.為什么沒有人使用border-image
之前我曾經(jīng)寫過一篇關(guān)于CSS的border-image屬性的文章?，F(xiàn)在幾乎所有的現(xiàn)代瀏覽器都支持這個屬性——除了IE10及以下IE版本。
看起來這是一個非常漂亮的CSS功能，它可以讓你用圖片修飾元素的邊框。

10.你知道table里的empty-cells屬性嗎？
css里的empty-cells屬性是所有瀏覽器都支持的，甚至包括IE8，它的用法是下面這個樣子：
table { empty-cells: hide;}
估計你從語義上已經(jīng)猜出它的作用了。它是為HTML table服務(wù)的。它會告訴瀏覽器，當(dāng)一個table單元格里沒有東西時，就隱藏它。

11.font-style的oblique屬性值
對與css的font-style屬性，我估計大家每次見到的都是使用“normal”或 “italic”兩個屬性值。但事實上，你還可以讓它賦值為“oblique”。

12.word-wrap和overflow-wrap是等效的
word-wrap并不是一個很常用的CSS屬性，但在特定的環(huán)境中確實非常有用的。我們經(jīng)常使用的一個例子是讓頁面中顯示一個長url時換行，而不是撐破頁面。