用CSS3做線性漸層效果

來源:互聯網
上載者:User

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

PS:本文原文本來提供了一個視頻,但是由於眾所周知的原因,我們無法觀看這個在Youtube上的視頻,想看的同學請自己想辦法觀看(最高720P)

Webkit

儘管Mozilla和Webkit通常對CSS3屬性採取同樣的文法,但是對於漸層,他們很不幸的不能達成一致。Webkit是第一個支援漸層的瀏覽器核心,它使用下面的結構:

/* 文法,參考自: http://webkit.org/blog/175/introducing-css-gradients/ */ -webkit-gradient(, [, ]?, [, ]? [, ]*) /* 實際用法... */ 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( [ ,]? , [, ]* )   /* 實際用法*/ background: -moz-linear-gradient(top, red, blue);

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

Color-Stops

如果你不需要從一個顏色到另一個顏色的100%漸層怎麼辦?這就是color stop起作用的時候了。一個普遍的設計技術是使用一個較短而細微的漸層,比如:

注意頂部的淺灰色到白色的細小的漸層

在過去,標準的做法就是製作一個圖片,並將其設為一個元素的背景圖片,然後讓其水平平鋪。然而使用CSS3,這是個小Case。

background: white; /* 為較舊的或者不支援的瀏覽器設定備用屬性 */ background: -moz-linear-gradient(top, #dedede, white 8%); background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white)); border-top: 1px solid white;

這次,我們讓漸層結束於8%,而不是預設的100%。請注意我們也在頭部採用了一個邊框,以形成對比。這很常用。
如果我們想要添加多一種(幾種)顏色,我們可以這樣做:

background: white; /* 備用屬性 */ background: -moz-linear-gradient(top, #dedede, white 8%, red 20%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

  • 對於-moz 版本,我們定義,從元素的20%的高度的地方開始是紅色。
  • 而對於-webkit,我們使用color-stop,採用兩個參數:哪裡開始停止,使用哪種顏色。

IE

IE並不支援CSS漸層,但是提供了漸層濾鏡,可以實現最簡單的漸層效果:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ff0000"); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ff0000")"; /* IE8 */

PS:事實上,我們在《RGBa色彩的瀏覽器支援》提到的IE的解決方案,就是使用這個漸層濾鏡。

關於CSS漸層的一些要點:

  • 儘可能的使用它。如果讓IE使用者看到一個固定的純色,我鼓勵你使用這種方法;
  • IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 漸層,Firefox 和Safari使用者通常經常升級瀏覽器,而Chrome的自動升級機制會在後台自動升級,所以這並不是個大問題;
  • 總是為不支援這些瀏覽器私人屬性的瀏覽器應用一個預設的,純色背景;
  • 永遠不要使用紅色到藍色的漸層,就像我用作例子的這種;
  • 頁面無須在每個瀏覽器裡面看起來完全一樣!
  • Firefox可以使用角度來設定漸層的方向,而webkit只能使用x和y軸的座標。


相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。