|
譯自：Quick Tip: Understanding CSS3 Gradients
中文：理解CSS3漸變
請尊重版權(quán)，轉(zhuǎn)載請注明來源，多謝！
為了顯示一個漸變而專門制作一個圖片的做法是不靈活的，而且很快會成為一種不好的做法。但是遺憾的是，截至寫這篇文章，可能還必須這樣做，但是希望不會持續(xù)太久。多虧Firefox 和Safari/Chrome，我們現(xiàn)在可以使用最少的努力實現(xiàn)強大的漸變。在本文中，我們將展示CSS漸變的簡單實現(xiàn)以及該屬性在Mozilla和webkit內(nèi)核瀏覽器中的不同。
PS：本文原文本來提供了一個視頻，但是由于眾所周知的原因，我們無法觀看這個在Youtube上的視頻，想看的同學請自己想辦法觀看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE
Webkit
盡管Mozilla和Webkit通常對CSS3屬性采取同樣的語法，但是對于漸變，他們很不幸的不能達成一致。Webkit是第一個支持漸變的瀏覽器內(nèi)核，它使用下面的結(jié)構(gòu)：
/* 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));
不要擔心這些語法會讓你看花眼，我也是這樣的！只要記得我們需要用一個逗號來隔開這個參數(shù)組。
- 漸變的類型? (linear)
- 漸變開始的X Y 軸坐標(0 0 – 或者left-top)
- 漸變結(jié)束的X Y 軸坐標(0 100% 或者left-bottom)
- 開始的顏色? (from(red))
- 結(jié)束的顏色? (to(blue))
出處：前端觀察
責任編輯：bluehearts
上一頁 下一頁 理解CSS3線性漸變 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 理解CSS3線性漸變 [1]
第 2 頁 
