在w3cschool學習了css3的漸變屬性。其中的liner-gradient(xx, color1 xx%, color2 xx%)令我感到困惑。不過在自己一番研究後總算有了點收貨。
w3cschool上使用的是
repeating-linear-gradient(...) 方法1
還有一種更基本的設定漸變屬性的方法是
linear-gradient(...) 方法2
樓主就是被這兩種方法搞暈了。
方法1的特點是：未定義的%區域將會被重複填充。舉例
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to right,red 0%, yellow 10%, green 20%);
}
</style>
</head>
<body>
<h3>重複的線性漸變</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html> 我們要先建立個簡單的概念。在腦中模擬一個下載進度條。他是這樣的：|0% - - - 20% - - - 40% - - - 60% - - - 80% - - - 100%|
| red - - - yellow - - - green |
三個顏色之間隔了兩個10%。每兩個顏色之間區域的顏色都是均勻漸變的。
前20%的顏色填充完畢，那麼後80%呢？ repeating-linear-gradient將會吧前20%的作爲藍本，均勻複製填充剩下的區域。就好像：
(here is 0%)| red - - - yellow - - - green |(here is 20%)| red - - - yellow - - - green |(here is 40%)| red - - - yellow - - - green |(here is 60%)| red - - - yellow - - - green |(here is 80%)| red - - - yellow - - - green |(here is 100%)
方法2的特點是：未定義的%區域將會被最後一個顏色全部填充。舉例：
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to right,red 0%, yellow 10%, green 20%); /* 標準的語法（必須放在最後） */
}
</style>
</head>
<body>
<h3>重複的線性漸變</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html> 正如我所說的，他的漸變可以看成這樣：
| red - - - yellow - - - green |(here is 20%)| green - - - - - - - - - - - - green |(here is 100%)
正綠色填充了剩下所有區域。