css3背景顏色漸變屬性 相容性測試基礎環境為：windows系統；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 語法： <linear-gradient>：linear-gradient([ <point>,]? <color-st
css3背景顏色漸變屬性 相容性測試基礎環境為：windows系統；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
語法：
<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?
取值：
<point>
- left：
- 設置左邊為漸變起點的橫坐標值。
- right：
- 設置右邊為漸變起點的橫坐標值。
- top：
- 設置頂部為漸變起點的縱坐標值。
- bottom：
- 設置底部為漸變起點的縱坐標值。
- <angle>：
- 用角度值指定漸變的方向（或角度）。
- <color-stop>：
- 指定漸變的起止顏色。
<color-stop>
- <color>：
- 指定顏色。請參閱顏色值
- <length>：
- 用長度值指定起止色位置。不允許負值
- <percentage>：
- 用百分比指定起止色位置。
說明：
用線性漸變創建圖像。- Firefox還支持使用<percentage>、<length>和center特殊值定義漸變起點，並支持起點與角度一起使用。
-
示例代碼：
（圖一）linear-gradient(#fff,#333); linear-gradient(top,#fff,#333); linear-gradient(bottom,#333,#fff); linear-gradient(-90deg,#fff,#333);以上幾句代碼都可以實現如（圖一）的漸變效果
相容性：
- 淺綠 = 支持
- 紅色 = 不支持
- 粉色 = 部分支持
| IE | Firefox | Safari | Chrome | Opera |
|---|---|---|---|---|
| 6-9 #1 | 4.0-15.0 -moz- | 4.0-6.0 -webkit- | 4.0-25.0 -webkit- #2 | 15.0 |
| 10.0 | 16.0 | 6.1 | 26.0 |
- IE5.5-9.0使用私有濾鏡來實現該效果: progid:DXImageTransform.Microsoft.Gradient()
- chrome4.0-9.0使用更老的語法：-webkit-gradient(linear,…)
