摘要：如果你并不是一個特別有經驗的程序員，我相信你未必知道屬性除了能用在文本顯示，還可以用作其它地方。說實話，估計這個值很少人會使用它，但你要知道確實可以使用這樣的一個值，如果以前不知道它，那么，現在，在有些罕見的地方，你也許就會變得聰明一點了。

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

對于CSS的color屬性，相信所有Web開發人員都使用過。如果你并不是一個特別有經驗的程序員，我相信你未必知道color屬性除了能用在文本顯示，還可以用作其它地方。

你可以先看一下下面的演示：

HTML代碼

  
Example list item


  
Example list item

CSS代碼

body {
  color: yellow;
  background: #444;
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}

ul {
  border: solid 2px;
  text-align: left;
}

ol {
  text-align: left;
}

hr {
  border-color: inherit;
}

http://jsfiddle.net/c0501uL5/3/embedded/result/

請注意，上面的代碼里只使用了一個color屬性，就是在body元素上，設置成了yellow。但是，你也看到了，所有這個頁面上的東西都變成了黃色，包括：

無法顯示的圖片的alt文字

list元素的邊框

無序list元素前面的小點

有序list元素前面的數字

還有hr元素

有趣的是，這個hr元素，缺省情況下它并不從body上繼承color的屬性，但我使用border-color: inherit強制讓它繼承。這是個很詭異的特征。

在CSS規范里是這樣說的：

  
這個屬性聲明了元素文本內容的前景色(foreground color)。除此之外，它的值還被用于其它地方間接的引用….比如，其它可以接受顏色值的屬性。

我無法想象出還有什么地方的屬性能用“前景色”來描述，如果你知道，請在評論里告訴我。

對于CSS里的visibility屬性，相信你用過不下幾百次。大多時候，你會把它的值設置成visible(這是所有頁面元素的缺省值)，或者是hidden。后者相當于display: none，但仍然占用頁面空間。

其實visibility可以有第三種值，就是collapse。當一個元素的visibility屬性被設置成collapse值后，對于一般的元素，它的表現跟hidden是一樣的。但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none一樣，也就是說，它們占用的空間也會釋放。

但遺憾的是，各種瀏覽器對collapse值的處理方式不一樣。看一下下面的演示：

HTML代碼

  

    
Fruits
    
Vegetables
    
Rocks
  
  

    
Apple
    
Celery
    
Granite
  
  

    
Orange
    
Cabbage
    
Flint
  

collapse行1
hide行1
重置

CSS代碼

body {
  text-align: center;
  padding-top: 20px;
  font-family: Arial, sans-serif;
}

table {
  border-collapse: separate;
  border-spacing: 5px;
  border: solid 1px black;
  width: 500px;
  margin: 0 auto;
}

th, td {
  text-align: center;
  border: solid 1px black;
  padding: 10px;
}

.vc {
  visibility: collapse;
}

.vh {
  visibility: hidden;
}

button {
  margin-top: 5px;
}

Javascript代碼

var btns = document.getElementsByTagName("button"),
    rows = document.getElementsByTagName("tr");

btns[0].addEventListener("click", function () {
  rows[1].className = "vc";
}, false);

btns[1].addEventListener("click", function () {
  rows[1].className = "vh";
}, false);

btns[2].addEventListener("click", function () {
  rows[1].className = "";
}, false);

演示

http://jsfiddle.net/c0501uL5/4/embedded/result/

CSS-Tricks的Almanac建議說不要使用這個值，因為瀏覽器的不統一。

據我的觀察：

在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區別。 (See this bug report and comments)

在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。

說實話，估計這個值很少人會使用它，但你要知道確實可以使用這樣的一個值，如果以前不知道它，那么，現在，在有些罕見的地方，你也許就會變得聰明一點了。

在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;
}

你可以用下面的演示檢測你的瀏覽器是否支持這種寫法：

http://jsfiddle.net/c0501uL5/5/embedded/result/

關于瀏覽器的支持情況，大概所有的現代瀏覽器都支持這些新屬性值，但對于一些非常老舊的瀏覽器(IE6/7/8)，最好在代碼里提供一些萬一不支持的補救機制。

之前說到了background-clip，你可能會想到clip屬性。它的用法是下面這個樣子：

.example {
    clip: rect(110px, 160px, 170px, 60px);
}

它的作用是按指定的尺寸、規定的大小裁剪元素。很多簡單，但唯一你需要注意的事情是，clip只會在絕對定位的元素上生效。所有，你必須這樣做：

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

在下面的演示中，你可以看到當元素在絕對定位/相對定位的切換中表現出來的效果：

http://jsfiddle.net/c0501uL5/6/embedded/result/

但是，你也可以將元素的position設置成position: fixed，因為，根據css官方規范，fixed的元素也屬于‘absolutely positioned’元素。

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

下面是一個實例演示，你可以調整容器的寬度，但你會發現，黃塊塊的padding-bottom的距離也會隨之寬度而變大或變小。

HTML代碼

  






寬度是: 400px
黃塊塊的Padding bottom是:
10%

CSS代碼

body {
  font-family: Arial, sans-serif;
  padding-top: 30px;
  text-align: center;
}

.wrapper {
  width: 400px;
  margin: 0 auto;
  border: solid 1px black;
}

.box {
  width: 100px;
  height: 100px;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%;
}

.range {
  display: block;
  margin: 20px auto;
}

output {
  text-align: center;
  display: block;
  font-weight: bold;
  padding-bottom: 20px;
}

output span {
  font-weight: normal;
}

http://jsfiddle.net/c0501uL5/7/embedded/result/

上面的代碼中，我們對內部子元素聲明了3個豎向的距離，都是百分比形式。當移動滑塊時，我們的js代碼只需修改了容器的寬度。但是，這個這三個屬性高度都跟隨著變化，可以看出，它們的百分比計算是基于容器的寬度，而不是高度的。

我們很多人都用過這樣的寫法：

.example {
  border: solid 1px black;
}

這里的border屬性的用法實際上是一種簡寫的形式，它分別設置了border-style, border-width, 和border-color — 用一句代碼表示它們三個。

但不要忘記，border-style, border-width, 和border-color也都有自己的簡寫形式。所以，border-width可以寫成這樣：

.example {
  border-width: 2px 5px 1px 0;
}

這樣，四個邊的寬度被一次設定。border-color 和 border-style 屬性也可以這樣做。下面的這個實例演示就是用的這種寫法：

HTML代碼

CSS代碼

body {
  font-family: Arial, sans-serif;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: peachpuff chartreuse thistle firebrick;
  border-style: solid dashed dotted double;
  border-width: 10px 3px 1px 8px;
}

p {
  text-align: center;
}

演示

http://jsfiddle.net/c0501uL5/8/embedded/result/

其實，這些每個屬性還可以繼續細化，被拆分成border-left-style, border-top-width, border-bottom-color….

但是，你無法用border的簡寫分別對四個邊設置不同的值，只能分開來設置。所以，border是一個簡寫里還有簡寫的屬性。

我相信有些小知識會讓你大吃一驚。

跟著最新的CSS規范，text-decoration現在的寫法是這樣的：

a {
  text-decoration: overline aqua wavy;
}

text-decoration屬性現在需要用三種屬性值來表示了：text-decoration-line, text-decoration-color, and text-decoration-style.

但不幸的是，目前只有火狐瀏覽器實現了對這些新屬性的支持。

你可以用火狐瀏覽器試一試下面的演示：

HTML代碼

IT"S LIKE WATER, PEOPLE

body {
  padding: 30px;
  text-align: center;
  font-family: Arial, sans-serif;
}

a, a:visited {
  color: blue;
  background: aqua;
  -moz-text-decoration-color: aqua;
  -moz-text-decoration-line: overline;
  -moz-text-decoration-style: wavy;
  text-decoration-color: aqua;
  text-decoration-line: overline;
  text-decoration-style: wavy;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.example {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background: aqua;
  border: solid thick red;
}

<上面的方塊使用了圖片描邊。在這個方塊的右下角，有一個可以調整這個方塊大小的小三角，點住它，拖動它調整方塊大小，看看有什么效果。.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.bi {
    border: 45px solid transparent;
    -webkit-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    -moz-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    width: 500px;
    margin: 30px auto 30px auto;
    overflow: hidden;
    resize: both;
}

table {
  empty-cells: hide;
}

  

    
Fruits
    
Vegetables
    
Rocks
  
  

    

    
Celery
    
Granite
  
  

    
Orange
    

    
Flint
  



切換EMPTY-CELLS

body {
  text-align: center;
  padding-top: 20px;
  font-family: Arial, sans-serif;
}

table {
  border: solid 1px black;
  border-collapse: separate;
  border-spacing: 5px;
  width: 500px;
  margin: 0 auto;
  empty-cells: hide;
  background: lightblue;
}

th, td {
  text-align: center;
  border: solid 1px black;
  padding: 10px;
}

button {
  margin-top: 20px;
}

var b = document.getElementById("b"),
    t = document.getElementById("table");

b.onclick = function () {
  if (this.getAttribute("data-ec") === "hide") {
    t.style.emptyCells = "show";
    this.setAttribute("data-ec", "show");
  } else {
    t.style.emptyCells = "hide";
    this.setAttribute("data-ec", "hide");
  }
};

Oblique Text
Italic Text

h1 {
  font-weight: normal;
  font-family: Georgia, serif;
  font-style: oblique;
  text-align: center;
  font-size: 50px;
}

h1:nth-child(2) {
  font-style: italic;
}

p {
  font-family: Arial, sans-serif;
  text-align: center;
}

  
“…讓一種字體標識為斜體(oblique)，如果沒有這種格式，就使用italic字體。”

supercalifragilisticexpialidocious
TOGGLE word-wrap

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.p {
  font-size: 24px;
  text-align: center;
  width: 200px;
  margin: 20px auto;
  border: solid 1px black;
  min-height: 60px;
  word-wrap: break-word;
}

button {
  display: block;
  margin: 0 auto;
}

var p = document.getElementById("p"),
    b = document.getElementById("b");

b.onclick = function () {
  if (this.getAttribute("data-ww") === "break-word") {
    p.style.wordWrap = "normal";
    this.setAttribute("data-ww", "normal");
  } else {
    p.style.wordWrap = "break-word";
    this.setAttribute("data-ww", "break-word");
  }
};