使用者:JackBlock/漸變色使用

介紹CSS漸變色函數的用法。

建議使用較新的Chrome瀏覽器閱讀此頁面。

基礎使用

線性漸變

參數：linear-gradient([<方向>,]<顏色節點1>,<顏色節點2>[,…])

方向

改變漸變的方向。

<方向>參數中的允許值如下：

• to left：從右向左
• to right：從左向右
• to top：從下到上
• to bottom：從上到下（不使用時的默認效果）
• to top left：從右下到左上
• to top right：從左下到右上
• to bottom left：從右上到左下
• to bottom right：從左上到右下
• 角度：以從下到上為初始方向，使漸變方向順時針旋轉指定角度
  • 一般使用deg或rad為單位
  • 可以使用小於0deg或大於360deg的角度

示例

linear-gradient(#FF7777,#77FF77,#7777FF)

linear-gradient(to top,#FF7777,#77FF77,#7777FF)

linear-gradient(to top right,#FF7777,#77FF77,#7777FF)

linear-gradient(0deg,#FF7777,#77FF77,#7777FF)

linear-gradient(45deg,#FF7777,#77FF77,#7777FF)

linear-gradient(1rad,#FF7777,#77FF77,#7777FF)

顏色節點

改變漸變中顏色的種類與分佈。

一般每一個<顏色節點>的參數如下：

<顏色>[ <位置>]

其中：

• <顏色>：一般使用預定義顏色名稱、十六進位顏色或RGBA顏色代碼（rgba()）表示顏色^[1]
• <位置>：指定顏色節點中心位置
  • 一般使用以%或px為單位的長度^[2]
    • %的參考長度為背景塊對角線在漸變方向上的投影
  • 可以使用小於0%或大於100%的長度
  • 如不指定則未指定的顏色節點等距分佈

示例

linear-gradient(to right,#FF7777,#77FF77 30%,#7777FF)

linear-gradient(to right,#FF7777 50%,#77FF77 75%,#7777FF)

linear-gradient(to right,#FF7777 33.3%,#77FF77 33.3%,#77FF77 66.7%,#7777FF 66.7%)

linear-gradient(to right,#FF7777,#FFFF77 15%,#77FF77 20%,#77FFFF,#7777FF)

linear-gradient(to right,#FF7777 25px,#77FF77 75px,#7777FF 100px)

linear-gradient(to right,#FF7777 25%,#77FF77 100px,#7777FF 100%)

<位置>參數亦可在兩個顏色節點之間的一個顏色節點單獨使用，用於改變兩個顏色節點中間顏色的位置。

示例

linear-gradient(to right,#FF7777,20%,#7777FF)

linear-gradient(to right,#FF7777,80%,#7777FF)

徑向漸變

參數：radial-gradient([[形狀] [尺寸] [at <位置>],]<顏色節點1>,<顏色節點2>[,…])

形狀與尺寸

[形狀]參數的允許值如下：

• circle：圓形
• ellipse：橢圓形

[尺寸]參數的允許值如下：

• closest-side：從圓心到最近的邊
• closest-corner：從圓心到最近的角
• farthest-side：從圓心到最遠的邊
• farthest-corner：從圓心到最遠的角（不使用時的默認效果）
• 一個或一對長度值，用逗號分隔
  • 如果只寫一個，則形狀為圓形，此時不可使用以%為單位的長度
  • 如果寫一對，則形狀為橢圓形
    • 此時，%的參考長度分別為背景塊的寬度和高度

形狀和尺寸可以只使用一個。

示例

radial-gradient(at 75px 25px,#FF7777,#77FF77,#7777FF)

radial-gradient(circle at 75px 25px,#FF7777,#77FF77,#7777FF)

radial-gradient(ellipse at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(circle closest-side at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(circle closest-corner at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(ellipse closest-side at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(circle 100px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(75px 100px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(closest-corner at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(75px at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(75px 50% at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

radial-gradient(50% 50% at 75px 25px,#FF7777,#77FF77,#7777FF 100%,#777 100%)

位置

決定圓心的位置，分為橫縱坐標。

橫坐標可選值：

• left：左邊
• center：中間（不使用時的默認效果）
• right：右邊
• 長度
  • %的參考長度為背景塊的寬度
  • 可以使用小於0%或大於100%的長度

縱坐標可選值：

• top：頂部
• center：中間（不使用時的默認效果）
• bottom：底部
• 長度
  • %的參考長度為背景塊的高度
  • 可以使用小於0%或大於100%的長度

示例

radial-gradient(25px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at left bottom,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at center 10px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at 70% 25px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at -5px 60px,#FF7777,#77FF77,#7777FF)

radial-gradient(25px at -5% 105%,#FF7777,#77FF77,#7777FF)

顏色節點

方向為從內向外，其餘與線性漸變的<顏色節點>相同，不再贅述。

錐形漸變

參數：conic-gradient([at <位置>,]<顏色節點1>,<顏色節點2>[,…])

位置

決定中心位置，參數同徑向漸變的位置。

示例

conic-gradient(#FF7777,#77FF77,#7777FF)

conic-gradient(at 10px 10px,#FF7777,#77FF77,#7777FF)

conic-gradient(at left top,#FF7777,#77FF77,#7777FF)

顏色節點

改變漸變中顏色的分佈。

每一個<顏色節點>的參數如下：

<顏色>[ <位置>]

其中：

• <顏色>：一般使用預定義顏色名稱、十六進位顏色或RGBA顏色代碼（rgba()）表示顏色^[1]
• <位置>：指定顏色中心位置
  • 使用以%、deg或rad為單位的角度
    • %的參考角度為360deg
  • 如不指定則顏色等距分佈
  • 亦存在指定兩顏色節點中間顏色位置的用法。

示例

conic-gradient(#FF7777,#77FF77,#7777FF)

conic-gradient(#FF7777 10deg,#77FF77 20deg,#7777FF 2rad)

conic-gradient(#FF7777 10%,#77FF77 45deg,#7777FF 70%)

conic-gradient(#FF7777,90deg,#7777FF)

重複漸變

• repeating-linear-gradient()：重複線性漸變
• repeating-radial-gradient()：重複徑向漸變
• repeating-conic-gradient()：重複錐形漸變

能創建重複的漸變，參數與其對應的單漸變分別相同。

使用該方式創建漸變時，下一組漸變的起始位置為上一組漸變最後一個顏色節點的位置，因此最好指定最後一個顏色節點的位置。

示例

repeating-linear-gradient(#FF7777 10%,#77FF77 20%,#7777FF 30%)

repeating-radial-gradient(circle 50px,#FF7777 10%,#77FF77 20%,#7777FF 30%)

repeating-conic-gradient(#FF7777 10deg,#77FF77 20deg,#7777FF 30deg)

技巧

多層漸變

參見：User:JackBlock/CSS background

background屬性可以疊加多層，寫在最前的置於最頂層，寫在最後的置於最底層。

利用transparent或rgba()函數可以創建透明或半透明區域，用於設計複雜的圖案。

示例

radial-gradient(25px at 50px 50px,#FF7777,#77FF77,#7777FF,transparent),
linear-gradient(#FF7777,#77FF77,#7777FF)

linear-gradient(to top,transparent 42.5%,#D0142C 42.5%,#D0142C 57.5%,transparent 57.5%),
linear-gradient(to left,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%),
linear-gradient(to top,transparent 37.5%,#FFFFFF 37.5%,#FFFFFF 62.5%,transparent 62.5%),
linear-gradient(to left,transparent 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,transparent 57.5%),
linear-gradient(to top right,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%),
linear-gradient(to top left,transparent 45%,#D0142C 45%,#D0142C 55%,transparent 55%),
linear-gradient(to top left,transparent 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,transparent 57.5%),
linear-gradient(to top right,#00237D 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,#00237D 57.5%)

展開分層

linear-gradient(to bottom,#000000 15%,transparent 15%,transparent 81%,#000000 81%),
linear-gradient(70deg,#000000 35%,transparent 35%),
linear-gradient(110deg,transparent 65%,#000000 65%),
linear-gradient(70deg,#FFFFFF 42%,transparent 42%),
linear-gradient(110deg,transparent 58%,#FFFFFF 58%),
linear-gradient(to bottom,#000000 25%,transparent 25%),
linear-gradient(85.5deg,#000000 48%,transparent 48%),
linear-gradient(94.5deg,transparent 52%,#000000 52%),
#FEC600

—— Ｖ Ｃ 編 輯 團 隊 ——

展開分層

抗鋸齒

上述例子中可以看到斜向的顏色分界有明顯鋸齒紋路。

如：

linear-gradient(to top right,#00237D 42.5%,#FFFFFF 42.5%,#FFFFFF 57.5%,#00237D 57.5%)

我們可以在分界之間留下1px的空間達到抗鋸齒的效果。（可利用calc()函數）

例如，將上述例子修改為：

linear-gradient(to top right,#00237D 42.5%,#FFFFFF calc(42.5% + 1px),#FFFFFF calc(57.5% - 1px),#00237D 57.5%)

注意：使用calc()函數，運算符號和數字間需要輸入空格。

• calc(42.5%+1px)（錯誤）
• calc(42.5% + 1px)（正確）

注釋