漸變色函數的結果屬于 <gradient> 數據類型，是一種特別的 <image> 數據類型，所以漸變色只能被用于<image>可以使用的地方

linear-gradient() 線性漸變

語法

linear-gradient( <angle> | <side-or-corner>, <color-stop-list>, ?<color-hint> )

<angle>

用角度值指定漸變的方向（或角度）。角度順時針增加。

<side-or-corner>

描述漸變線的方向，默認方向為自上之下。它包含to和兩個關鍵詞：第一個指出水平位置left or right，第二個指出垂直位置top or bottom。關鍵詞的先后順序無影響，且都是可選的。to top, to bottom, to left 和 to right這些值會被轉換成角度0度、180度、270度和90度。其余值會被轉換為一個以向頂部中央方向為起點順時針旋轉的角度。

<color-stop-list>

包括一個顏色值及可選的終點位置（從何時開始漸變）

• 顏色值
  顏色值支持16進制顏色、顏色關鍵字（red）、rgb()、rgba()、transparent

• 終點位置
  定義當前色值從漸變軸的何處開始漸變，可以是一個百分比值或**<length>**

<color-hint>

顏色沿著漸變軸的方向顏色變化順序為：顏色1 — 完全融合 — 顏色2

定義漸變中點，就是定義兩個顏色完全融合的位置。設置在兩個顏色值之間（注意與顏色終點不同，需要用逗號分隔）

范例

角度

• 默認從上到下

  background-image:linear-gradient(rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
  

• 方向與角度相通

  to right 等價于 90deg 等價于 450deg 等同于 -270deg

  background-image:linear-gradient(90deg, rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
  

開始漸變位置

• 紅色從漸變軸的50%開始漸變
  可以看到50%的位置有一條明顯的線，紅色部分從這里開始進行漸變
  background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1));
  
• 藍色部分從漸變軸的80%結束漸變（藍色是結束顏色）
  與上圖進行對比可以發現漸變效果發生在漸變軸的50%位置與80%位置之間
  background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1) 80%);
  

定義漸變中點（完全融合位置）

默認為兩個顏色變化開始到結束的中點

把漸變范圍定義到30%到70%之間，此時的漸變中點就是50%（50%是30%到70%的中點），這時候漸變中點的取值范圍為 (30%,70%)，不能取兩端的值，超出范圍時實際效果為顏色之間變化，沒有漸變效果
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 30%, rgba(0, 0, 255, 1) 70%);

• 手動定義中點
  中點設置為40%，即在漸變軸的40%處實現完全融合
  background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 30%, 40%, rgba(0, 0, 255, 1) 70%);
  

多個漸變效果

存在多個漸變函數時會同時生效，后面生成的圖形會疊加在前面生成圖形之上

附上MDN的例子~~~
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%);

注意

設置的百分比值、長度值都是相對于漸變起點進行設置

可以設置多個漸變函數，后面的會疊加在上面

總結

以上是生活随笔為你收集整理的【CSS】线性渐变属性值及范例详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。