CSS教程:關於CSS漸層的一些要點

來源:互聯網
上載者:User

譯自:Quick Tip: Understanding CSS3 Gradients
中文:理解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)); 

不要擔心這些文法會讓你看花眼,我也是這樣的!只要記得我們需要用一個逗號來隔開這個參數組。

  • 漸層的類型? (linear)
  • 漸層開始的X Y 軸座標(0 0 – 或者left-top)
  • 漸層結束的X Y 軸座標(0 100% 或者left-bottom)
  • 開始的顏色? (from(red))
  • 結束的顏色? (to(blue))



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。