文法：
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值：
下述值用來表示漸層的方向，可以使用角度或者關鍵字來設定：
<angle>：
用角度值指定漸層的方向（或角度）。
to left：
設定漸層為從右至左。相當於: 270deg
to right：
設定漸層從左至右。相當於: 90deg
to top：
設定漸層從下到上。相當於: 0deg
to bottom：
設定漸層從上到下。相當於: 180deg。這是預設值，等同於留空不寫。
<color-stop> 用於指定漸層的起止顏色：
<color>：
指定顏色。
<length>：
用長度值指定起止色位置。不允許負值
<percentage>：
用百分比指定起止色位置。
說明：
用線性漸層建立映像。
如果想建立以對角線方式漸層的映像，可以使用 to top left 這樣的多關鍵字方式來實現。
用預設的漸層方向繪製一個最簡單的線性漸層
範例程式碼：
linear-gradient(#fff, #333);linear-gradient(to bottom, #fff, #333);linear-gradient(to top, #333, #fff);linear-gradient(180deg, #fff, #333);linear-gradient(to bottom, #fff 0%, #333 100%);
相容性：
1. 使用過時的文法：-webkit-gradient(linear,…)
2. IE6.0-9.0使用私人濾鏡來實現該效果: progid:DXImageTransform.Microsoft.Gradient()
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>linear-gradient()_CSS參考手冊_web前端開發參考手冊系列</title><meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /><style>p {width: 200px;height: 100px;margin-top: 10px;border: 1px solid #ddd;}.test {background: linear-gradient(#fff, #333);}.test2 {background: linear-gradient(#000, #f00 50%, #090);}.test3 {background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);}.test4 {background: linear-gradient(45deg, #000, #f00 50%, #090);}.test5 {background: linear-gradient(to top right, #000, #f00 50%, #090);}</style></head><body><p></p><p></p><p></p><p></p><p></p></body></html>
【相關推薦】
1. CSS3免費視頻教程
2. 深入詳解CSS3中斜向線性漸層lineaer-gradient
3. 關於CSS3中linear-gradient參數的詳解
4. CSS linear-gradient() 的文法詳解
5. CSS3中linear-gradient的執行個體詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
