使用者: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)

顏色節點

https://www.mywiki.cn/images/2895/a/a6/How_linear_gradient_works_2.png

‌外部圖片

查看原始圖片

<位置>參數指定了顏色的中心位置。

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

一般每一個<颜色节点>的參數如下：

<颜色>[ <位置>]

其中：

<颜色>：一般使用預定義顏色名稱、十六進制顏色或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)（正確）

注釋

↑ ^1.0 ^1.1 其他表示方式包括RGB顏色、HSL顏色代碼、HSLA顏色代碼，參見 https://www.runoob.com/cssref/css-colors-legal.html 。
↑ 全部可用的單位包括em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax，參見 https://www.runoob.com/cssref/css-units.html ~~，但是真的有人會用這些奇奇怪怪的單位嗎~~。

[color-1] 1.0 ^1.1 其他表示方式包括RGB顏色、HSL顏色代碼、HSLA顏色代碼，參見 https://www.runoob.com/cssref/css-colors-legal.html 。

[length-2] 全部可用的單位包括em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax，參見 https://www.runoob.com/cssref/css-units.html ~~，但是真的有人會用這些奇奇怪怪的單位嗎~~。

[1]

[2]

使用者:JackBlock/漸變色使用

目次

基礎使用

線性漸變

方向

顏色節點

徑向漸變

形狀與尺寸

位置

顏色節點

錐形漸變

位置

顏色節點

重複漸變

技巧

多層漸變

抗鋸齒

注釋

導覽選單

使用者:JackBlock/漸變色使用

基礎使用

線性漸變

方向

顏色節點

徑向漸變

形狀與尺寸

位置

顏色節點

錐形漸變

位置

顏色節點

重複漸變

技巧

多層漸變

抗鋸齒

注釋

導覽選單

搜尋