CSS 漸變屬性linear-gradient

CSS linear-gradient() 函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。其結(jié)果屬于<gradient>數(shù)據(jù)類型，是一種特別的<image>數(shù)據(jù)類型。

• 漸變軸為45度，從藍色漸變到紅色

  linear-gradient(45deg, blue, red);

• 從右下到左上、從藍色漸變到紅色

  linear-gradient(to left top, blue, red);

• /從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束

  linear-gradient(0deg, blue, green 40%, red);

實例：

background: linear-gradient(#e66465, #9198e5);

結(jié)果：

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

結(jié)果：

background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

結(jié)果：

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

結(jié)果：

如同其他gradient函數(shù)一般，linear-gradient() 函數(shù)沒有內(nèi)在尺寸；即，它不具備固有的或首選的尺寸，也不具備首選的比率。該函數(shù)的具體尺寸將與其適用的元素尺寸匹配。

提示：

• 利用repeating-linear-gradient函數(shù)可以實現(xiàn)線形重復(fù)漸變效果。

• 由于<gradient>數(shù)據(jù)類型系<image>的子數(shù)據(jù)類型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不適用于background-color以及類似的使用 <color>數(shù)據(jù)類型的屬性中。