使用 CSS 語法做網頁漸層

漸層

漸層效果需要設定至少兩種顏色在開頭和結尾，可以設定多種顏色，瀏覽器會自動計算中間漸變的顏色。

• 使用對象: background、list-style-image
• 漸層類型: linear-gradient、radial-gradient、conic-gradient

linear-gradient(方向, 顏色1 位置1, 顏色2 位置2);

線性漸層，依指定角度來直線產生對應的顏色。

• 方向: 預設從上往下漸變(to bottom | 180deg)，可以使用角度(0~180deg)或方向屬性(to top | bottom | left | right)。
• 位置: 0%~100%，沒有指定參數時，則會自動等比例分配。設定每個顏色的位置不要重疊，就可以出現漸層。

  div {
      width: 300px;
      height: 300px;
      background-image: linear-gradient(blue, green);
  }

  

div {
    width: 300px;
    height: 300px;
    background-image: linear-gradient(blue 50%, green 50%);
}

repeating-linear-gradient
線性重複漸層，需要指定需要重複的顏色位置。

div {
    width: 300px;
    height: 300px;
    background-image: repeating-linear-gradient(blue 0%, blue 5%, pink 5%, pink 10%);
}

radial-gradient(方式 尺寸 at 中心位置, 顏色1 位置1, 顏色2 位置2)

放射漸層，從單點出發，以圓形或橢圓的方式向外放射。

• 方式: circle (圓形) | ellipse (橢圓,預設)
• 尺寸: farthest-corner (最遠角,預設) | closest-side (最近邊) | farthest-side (最遠邊) | closest-corner (最近角) | x軸 y軸(橢圓,例: 80% 20%)
• 中心位置: center (預設)

div {
    width: 300px;
    height: 300px;
    background-image: radial-gradient(blue, pink)
}

div {
    width: 300px;
    height: 300px;
    background-image: radial-gradient(blue 20%, pink 55%, orange 90%)
}

repeating-linear-gradient
放射重複漸層

conic-gradient(顏色1 位置1, 顏色2 位置2);

錐形漸層。

div {
    width: 300px;
    height: 300px;
    background-image: conic-gradient(blue, pink)
}

div {
    width: 300px;
    height: 300px;
    background-image: conic-gradient(blue 0, blue 180deg, pink 180deg, pink 360deg)
}

參考資料 :
oxxostudio