理解CSS3線性漸變

為了顯示一個漸變而專門製作一個圖片的做法是不靈活的，而且很快就會成為一種不好的做法。但遺憾的是，截至寫這篇文章，可能還必須這麼做，但希望不會持續太久。多虧Firefox 和Safari/Chrome，我們現在可以使用最少的努力來實現強大的漸變。在本文中，我們將展示CSS漸變的簡單實作以及該屬性在Mozilla和webkit核心瀏覽器中的不同。

PS：本文原文來提供了一個視頻，但是由於眾所周知的原因，我們無法觀看這個在Youtube上的視頻，想看的同學請自己想辦法觀看(最高720P) : http://www.youtube.com/ watch?v=9D2hyM5SSCE

Webkit

雖然Mozilla和Webkit通常對CSS3屬性採取同樣的語法，但是對於漸變，他們很不幸的不能達成一致。 Webkit是第一個支援漸層的瀏覽器內核，它使用下面的結構：

/* Syntax, taken from: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/* In practice... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));