CSS3線性漸變簡單實現以及該屬性在瀏覽器中的不同

2024-07-11 08:29:21

字體：大中小

來源：轉載

供稿：網友

為了顯示一個漸變而專門制作一個圖片的做法是不靈活的，而且很快會成為一種不好的做法。但是遺憾的是，截至寫這篇文章，可能還必須這樣做，但是希望不會持續太久。多虧Firefox 和Safari/Chrome，我們現在可以使用最少的努力實現強大的漸變。在本文中，我們將展示CSS漸變的簡單實現以及該屬性在Mozilla和webkit內核瀏覽器中的不同。
PS：本文原文本來提供了一個視頻，但是由于眾所周知的原因，我們無法觀看這個在Youtube上的視頻，想看的同學請自己想辦法觀看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE

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

復制代碼

代碼如下:
/* 語法，參考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 實際用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

不要擔心這些語法會讓你看花眼，我也是這樣的！只要記得我們需要用一個逗號來隔開這個參數組。
漸變的類型? (linear)
漸變開始的X Y 軸坐標(0 0 – 或者left-top)
漸變結束的X Y 軸坐標(0 100% 或者left-bottom)
開始的顏色? (from(red))
結束的顏色? (to(blue))

Mozilla
Firefox，從3.6版本才開始支持漸變，更喜歡和Webkit略微不同的語法。

復制代碼

代碼如下:
/* 語法，參考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
/* 實際用法*/
background: -moz-linear-gradient(top, red, blue);

請注意我們將漸變的類型——linear——放到了屬性前綴中了
漸變從哪里開始? (top – 我們也可以使用度數，比如-45deg)
開始的顏色? (red)
結束的顏色? (blue)

Color-Stops
如果你不需要從一個顏色到另一個顏色的100%漸變怎么辦？這就是color stop起作用的時候了。一個普遍的設計技術是使用一個較短而細微的漸變，比如：
Subtle Gradients