CSS 函式 ( 漸層色 )

CSS 除了可以使用「單一顏色」設定樣式，也能使用「漸層色」函式來產生線性漸層、放射漸層或重複漸層等色彩效果，這篇教學會介紹「漸層色」相關的 CSS 函式，例如 linear-gradient()、radial-gradient()、conic-gradient() 等等，透過多種顏色位置的設定，讓網頁的色彩更豐富更多變化。

CSS 教學 - CSS 函式 ( 漸層色 )

「漸層色」的 CSS 函式

下方列出「漸層色」類型的 CSS 函式 ( 支援度 All 表示主流瀏覽器都支援 )：

定義顏色函式	說明	支援度
linear-gradient()	線性漸層。	All
radial-gradient()	放射漸層。	All
conic-gradient()	圓錐形漸層。	IE 不支援
repeating-linear-gradient()	線性重複漸層。	All
repeating-radial-gradient()	放射重複漸層。	All
repeating-conic-gradient()	圓錐形重複漸層。	IE 不支援

linear-gradient()

「linear-gradient()」是「線性漸層」CSS 函式，基本上具有兩個必填的顏色參數，和三個選填參數。

參數	數值範圍	說明
angle ( 選填 )	0～359 deg，預設 180deg	往哪個角度填滿漸層，0deg 是正上方，角度順時針增加。
color1	顏色	開始的顏色。
p1 ( 選填 )	0%～100% 浮點數	開始顏色的位置。
color2	顏色數值	結束的顏色。
p2 ( 選填 )	0%～100% 浮點數	結束顏色的位置。

下方範例執行後，會使用「基本」寫法，將三個 div 套用紅色到黃色的漸層背景色。

線上展示：https://codepen.io/oxxo/pen/GRarMGb

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;       
  }
  .a {
    /* 漸層從上往下 */
    background: linear-gradient(red, yellow);   
  }
  .b {
    /* 按照角度漸層，顏色等比例分配位置 */
    background: linear-gradient(0deg, red, yellow);  
  }
  .c {
    /* 按照角度漸層，顏色根據指定位置出現 */ 
    background: linear-gradient(0deg, red 0%, yellow 100%);  
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - linear-gradient()

angel 參數除了可以使用 deg 單位設定角度，也可以使用下列八種「方向名稱」代替指定的方位角度：

方向	角度	說明
to top	0deg	下到上
to bottom	180deg	上到下
to left	90deg	右到左
to right	270deg	左到右
to left top	135deg	右下到左上
to left bottom	45deg	右上到左下
to right top	215deg	左下到右上
to right bottom	305deg	左上到右下

下方範例執行後，會使用方向名稱的寫法，將三個 div 套用紅色到黃色的漸層背景色。

線上展示：https://codepen.io/oxxo/pen/XWwpeBz

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;       
  }
  .a {
    /* 漸層從下往上 */
    background: linear-gradient(to top, red, yellow);
  }
  .b {
    /* 漸層從右上往左下 */
    background: linear-gradient(to left bottom, red, yellow);
  }
  .c {
    /* 漸層從左下往右上 */
    background: linear-gradient(to right top, red 0%, yellow 100%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - linear-gradient() 方向名稱

雖然 linear-gradient() 預設兩種顏色，但可以按照自己的需求擴充顏色和位置參數，預設位置從 0% 開始 100% 結束，但如果從大於 0% 的位置開始或小於 100% 的位置結束，則會使用開始或結束的顏色，填滿到 0% 或 100%。

下方會用多種顏色漸層，填滿不同的 div，可以看到如果紅色從 40% 的位置開始，則 0%～40% 的區域都會被填滿紅色，如果紫色從 60% 的位置結束，則 60%～100% 的區域都會被填滿紫色，其他的顏色就從 40%～60% 之間平均分配。

線上展示：https://codepen.io/oxxo/pen/WNBRZYx

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;       
  }
  .a {
    background: linear-gradient(red, yellow, green, blue, purple);
  }
  .b {
    background: linear-gradient(red 50%, yellow, green, blue, purple);
  }
  .c {
    background: linear-gradient(45deg, red 40%, yellow, green, blue, purple 60%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - linear-gradient() 多種顏色

如果設定「顏色位置重疊」，漸層的效果將會消失，直接呈現清楚的分色效果，若前後邊界沒有設定顏色，則會以最靠近該邊界的顏色補滿，下方的範例會清楚的呈現兩種顏色與七種顏色，而不會出現顏色之間的漸層。

線上展示：https://codepen.io/oxxo/pen/xxNgXBJ

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    background: linear-gradient(90deg, red 50%,black 50%);
  }
  .b {
    background: linear-gradient(90deg,
      red 0%, red 15%,
      orange 15%, orange 30%,
      yellow 30%, yellow 45%,
      green 45%, green 60%,
      blue 60%, blue 75%,
      indigo 75%, indigo 90%,
      black 90%, black 100%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - linear-gradient() 分色效果

radial-gradient()

「radial-gradient()」是「放射狀漸層」CSS 函式，具有下列必填和選填的參數：

參數	數值範圍	說明
shape ( 選填 )	circle、ellipse ( 預設 )	使用哪種形狀填滿漸層。
size ( 選填 )	closest-side、farthest-side、closest-corner、farthest-corner ( 預設 )	放射半徑屬性。
position ( 選填 )	at center ( 預設 )、at top、at bottom、at left、at right	中心點位置。
color1	顏色	開始的顏色。
p1 ( 選填 )	0%～100% 浮點數	開始顏色的位置。
color2	顏色數值	結束的顏色。
p2 ( 選填 )	0%～100% 浮點數	結束顏色的位置。

下方範例執行後，會使用「基本」寫法，將三個 div 套用紅色到黃色的放射狀漸層背景色。

線上展示：https://codepen.io/oxxo/pen/NWVdwGd

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 紅色到黑色放射漸層 */
    background: radial-gradient(red, black);
  }
  .b {
    /* 中心點在正上方，紅色到黑色放射漸層 */
    background: radial-gradient(at top, red, black);
  }
  .c {
    /* 中心點在正上方，碰到最近角落，圓形，紅色到黑色放射漸層 */
    background: radial-gradient(circle closest-corner at top , red, black);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - radial-gradient()

shape 參數可以設定「兩種不同形狀」的放射狀漸層，下方列出參數的說明：

填滿形狀	說明
circle	圓形，左右百分比相同時自動採用。
ellipse	橢圓形，左右百分比不同時自動採用。

兩者在正方形的中心點區域沒有太大差異，但如果是類似下方範例長方形的區域或正方形邊緣，就會看出不同的填滿效果。

線上展示：https://codepen.io/oxxo/pen/vYwgWGY

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 長方形，橢圓填滿 */
    width: 250px;
    background: radial-gradient(ellipse, red, black);
  }
  .b {
    /* 長方形，圓形填滿 */
    width: 250px;
    background: radial-gradient(circle, red, black);
  }
  .c {
    /* 橢圓填滿，中心點在正上方 */
    background: radial-gradient(ellipse at top, red, black);
  }
  .d {
    /* 圓形填滿，中心點在正上方 */
    background: radial-gradient(circle at top, red, black);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - radial-gradient() 方向名稱

size 參數可以設定放射漸層的「填滿的方式」，下方列出參數的說明：

填滿方式	說明
closest-side	離中心點最近的元素邊緣
farthest-side	離中心點最遠的元素邊緣
closest-corner	離中心點最近的元素角落
farthest-corner	離中心點最遠的元素角落 ( 預設值 )

下方範例呈現四種填滿方式所產生的效果。

線上展示：https://codepen.io/oxxo/pen/jOoyaVG

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 最近邊 */
    background: radial-gradient(circle closest-side, red, black);
  }
  .b {
    /* 最遠邊 */
    background: radial-gradient(circle farthest-side, red, black);
  }
  .c {
    /* 最近角 */
    background: radial-gradient(circle closest-corner at top, red, black);
  }
  .d {
    /* 最遠角 */
    background: radial-gradient(circle farthest-corner at top, red, black);
  }
</style>\

CSS 教學 - CSS 函式 ( 漸層色 ) - radial-gradient() 填滿方式

position 參數除了使用方向名稱設定放射漸層的「中心點位置」，也可以使用「左右百分比上下百分比」的方式設定位置 ( 可設定 0%～100% 區間內的數值)，主要位置參考下表：

方向	效果等同	說明
at center	at 50% 50%	中心
at top	at 50% 0%	中間上方
at bottom	at 50% 100%	中間下方
at left	at 0% 50%	中間左邊
at right	at 0% 50%	中間右邊
at left top	at 0% 0%	左上角
at left bottom	at 0% 100%	左下角
at right top	at 100% 0%	右上角
at right bottom	at 100% 100%	右下角

下方範例呈現不同中心點位置的放射狀漸層效果。

線上展示：https://codepen.io/oxxo/pen/MWdJOpV

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 中間上方 */
    background: radial-gradient(at top, red, black);
  }
  .b {
    /* 中間下方 */
    background: radial-gradient(at bottom, red, black);
  }
  .c {
    /* 右上方 */
    background: radial-gradient(at top right, red, black);
  }
  .d {
    /* 使用百分比使其放在靠右下方的位置 */
    background: radial-gradient(at 60% 60%, red, black);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - radial-gradient() 中心點位置

雖然 radial-gradient() 預設兩種顏色，但可以按照自己的需求擴充顏色和位置參數，預設位置從 0% 開始 100% 結束，但如果從大於 0% 的位置開始或小於 100% 的位置結束，則會使用開始或結束的顏色，填滿到 0% 或 100%。如果設定的「顏色位置重疊」，漸層的效果將會消失，直接呈現清楚的分色效果，若前後邊界沒有設定顏色，則會以最靠近該邊界的顏色補滿。

下方會用多種顏色的放射狀漸層，填滿不同的 div，除了有前後從 40% 和 60% 開始的漸層，也有顏色位置重疊的漸層。

線上展示：https://codepen.io/oxxo/pen/NWVdwvg

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 使用自動分配位置 */
    background: radial-gradient(red, orange, yellow, green, blue, purple);
  }
  .b {
    /* 第一項和最後一項設定位置，其餘顏色使用自動分配位置 */
    background: radial-gradient(red 40%, orange, yellow, green, blue, purple 60%);
  }
  .c {
    /* 顏色位置重疊 */
    background: radial-gradient(red 50%, black 50%);
  }
  .d {
    /* 多色位置重疊 */
    background: radial-gradient(
      red 0%, red 15%,
      orange 15%, orange 30%,
      yellow 30%, yellow 45%, 
      green 45%, green 60%,
      blue 60%, blue 75%,
      purple 75%, purple 100%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - radial-gradient() 多種顏色

運用放射狀漸層的中心點以及顏色位置，甚至可以模擬一個立體圓球的漸層顏色。

線上展示：https://codepen.io/oxxo/pen/OJYWOzW

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 100px; 
    border-radius:50%;
    background:radial-gradient(
      circle at 35% 25%,
      #fff 0,#ccc 20%,
      #999 40%,#000 90%,
      #666 95%,#999 100%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - radial-gradient() 模擬立體球

conic-gradient()

「conic-gradient()」是「圓錐形漸層」CSS 函式，是 CSS Level 4 才出現的漸層函式，具有至少兩個必填的「顏色」參數和選填的「角度」參數，角度使用「順時針」的方式增加。

參數	數值範圍	說明
color1	顏色	開始的顏色。
angle1 ( 選填 )	0deg ～ 359deg	開始顏色的角度，正上方為 0deg，順時針增加。
color2	顏色數值	結束的顏色。
angle2 ( 選填 )	0deg ～ 359deg	結束顏色的角度，正上方為 0deg，順時針增加。

下方使用基本的 conic-gradient() 寫法，將不同的 div 套用不同的漸層色，使用多種顏色甚至可以做出彩虹的圓錐形漸層。

線上展示：https://codepen.io/oxxo/pen/gOJgXjg

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 雙色圓錐漸層 */
    background: conic-gradient(yellow, blue);
  }
  .b {
    /* 雙色圓錐漸層 */
    background: conic-gradient(white, black);
  }
  .c {
    /* 彩虹圓錐漸層 */
    background: conic-gradient(red, orange, yellow, green, blue, purple, red);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - conic-gradient()

如果將顏色的「角度重疊」，就可以很輕鬆地做出「分色效果」，如果搭配數據產生指定角度，再將 div 設定為圓形，甚至可以做出類似「圓餅圖」的效果。

線上展示：https://codepen.io/oxxo/pen/MWdJOzP

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    background:conic-gradient(
      #500 0, #500 45deg,
      #f00 45deg, #f00 90deg,
      #f50 90deg, #f50 135deg,
      #ff0 135deg,#ff0 180deg,
      #0c0 180deg, #0c0 225deg,
      #09d 225deg, #09d 270deg,
      #00b 270deg, #00b 315deg,
      #909 315deg, #909 360deg
    );
  }
  .b{
    border-radius:50%;
    background:conic-gradient(
      #fc0 0, 
      #fc0 45deg,
      #59f 45deg
    );
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - conic-gradient() 分色與圓餅圖

repeating-linear-gradient()

「repeating-linear-gradient()」是「線性重複漸層」CSS 函式，所有的設定值和 linear-gradient() 相同，只是重複漸層的顏色位置參數不會指定到 100%，剩下沒有指定的區域，就會按照前方的百分比設定的規律，進行重複填滿的動作，舉例來說，下方 div 的重複顏色最多都只設定到 20% 或 30%，剩下來 70%～80% 的空間，就會按照重複的規律進行填滿。

線上展示：https://codepen.io/oxxo/pen/LYoxeYG

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色重複漸層 */
    background: repeating-linear-gradient(orange 0%, black 20%);
  }
  .b {
    /* 左下往右上，橘色黑色重複漸層 */
    background: repeating-linear-gradient(45deg, orange 0%, black 20%);
  }
  .c {
    /* 下往上，橘色黑色重複漸層 */
    background: repeating-linear-gradient(to top, orange 0%, black 20%);
  }
  .d {
    /* 右上往左下，橘色白色黑色重複漸層 */
    background: repeating-linear-gradient(to left bottom, orange 0%, white 25%, black 50%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - repeating-linear-gradient()

如果顏色的「位置重疊」，就能做出漂亮的「分色效果」，如果搭配「多重背景」的樣式，甚至還能做出顏色交疊的格紋背景效果。

線上展示：https://codepen.io/oxxo/pen/OJYWzyz

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色位置重複，分色效果 */
    background: repeating-linear-gradient(
      orange 0%,  orange 10%,
      black 10%, black 20%);
  }
  .b {
    /* 橘色黑色位置重複，分色效果，45deg */
    background: repeating-linear-gradient(
      45deg,
      orange 0%,  orange 10%,
      black 10%, black 20%);
  }
  .c {
    /* 橘色黑色位置重複，分色效果，多重背景，transparent 表示全透明 */
    background: 
      repeating-linear-gradient(
      45deg,
      transparent 0%,  transparent 10%,
      black 10%, black 20%),
      repeating-linear-gradient(
      -45deg,
      orange 0%,  orange 10%,
      black 10%, black 20%)
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - repeating-linear-gradient() 分色效果

如果將 div 的高度縮小，甚至可以做出各種不同的「虛線」樣式。

線上展示：https://codepen.io/oxxo/pen/wvbgpdx

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    height: 5px;
    margin: 10px;
  }
  .a {
    background: repeating-linear-gradient(
      to right,
      white 0%,  white 2%,
      black 2%, black 3%);
  }
  .b {
    background: repeating-linear-gradient(
      to right,
      white 0%,  white 2%,
      black 2%, black 5%,
      white 5%, white 6%,
      black 6%, black 7%);
  }
  .c {
    background: repeating-linear-gradient(
      45deg,
      white 0%,  white 2%,
      black 2%, black 6%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - repeating-linear-gradient() 虛線效果

repeating-radial-gradient()

「repeating-radial-gradient()」是「放射狀重複漸層」CSS 函式，所有的設定值和 radial-gradient() 相同，只是重複漸層的顏色位置參數不會指定到 100%，剩下沒有指定的區域，就會按照前方的百分比設定的規律，進行重複填滿的動作å。

線上展示：https://codepen.io/oxxo/pen/XWwpVjr

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色重複放射漸層 */
    background: repeating-radial-gradient(orange 0%, black 20%);
  }
  .b {
    /* 中間正上方，橘色黑色重複放射漸層 */
    background: repeating-radial-gradient(at top, orange 0%, black 20%);
  }
  .c {
    /* 右下方，橘色黑色重複放射漸層 */
    background: repeating-radial-gradient(at 70% 70%, orange 0%, black 20%);
  }
  .d {
    /* 左下角，橘色白色黑色重複放射漸層 */
    background: repeating-radial-gradient(at left bottom, orange 0%, white 5%, black 10%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - repeating-radial-gradient()

如果顏色的「位置重疊」，就能做出漂亮的「分色效果」，如果搭配「多重背景」的樣式，甚至還能做出顏色交疊的格紋背景效果。

線上展示：https://codepen.io/oxxo/pen/KKLaZNJ

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px; 
    float: left;
    margin: 5px;
  }
  .a {
    /* 橘色黑色重複放射漸層，位置重疊 */
    background: repeating-radial-gradient(
      orange 0%, orange 10%,
      black 10%, black 20%);
  }
  .b {
    /* 橘色黑色重複放射漸層，位置重疊，多重背景，transparent 為透明色 */
    background: repeating-radial-gradient(
      circle at left bottom, 
      transparent 0%, transparent 5%,
      black 5%, black 8%),
      repeating-radial-gradient(
      circle at right top, 
      orange 0%, orange 5%,
      black 5%, black 8%);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - repeating-radial-gradient() 分色效果

repeating-conic-gradient()

「repeating-conic-gradient()」是「圓錐形重複漸層」CSS 函式，所有的設定值和 conic-gradient() 相同，只是重複漸層的顏色位置參數不會指定到 100%，剩下沒有指定的區域，就會按照前方的百分比設定的規律，進行重複填滿的動作。

線上展示：https://codepen.io/oxxo/pen/ExzZobP

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
  }
  .a {
    background: repeating-conic-gradient(
        orange 0deg, black 20deg);
  }
  .b {
    background: repeating-conic-gradient(
      at top,  
      orange 0deg, black 20deg);
  }
  .c {
    background: repeating-conic-gradient(
      at 70% 70%,  
      orange 0deg, black 20deg);
  }
  .d {
    background: repeating-conic-gradient(
      orange 0deg, black 15deg, orange 30deg);
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - repeating-conic-gradient()

如果顏色的「位置重疊」，就能做出漂亮的「分色效果」，而圓錐重複漸層的分色效果，更是可以做出各種有趣的「放射線」效果。

線上展示：https://codepen.io/oxxo/pen/LYoxeQW

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
  }
  .a {
    background: repeating-conic-gradient(
        red 0deg, red 20deg,
        white 20deg, white 40deg
    );
  }
  .b {
    background: repeating-conic-gradient(
        at bottom,
        red 0deg, red 10deg,
        white 10deg, white 20deg
    );
  }
</style>

CSS 教學 - CSS 函式 ( 漸層色 ) - repeating-conic-gradient() 放射線

小結

CSS 的「漸層色」函式相當好用，真的是「不用不知道，一用就愛上！」如果有漸層色的需求，不妨先使用漸層色函式來處理，也可以省去許多背景圖片的空間和流量。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 函式 ( 漸層色 )

「漸層色」的 CSS 函式

linear-gradient()

radial-gradient()

conic-gradient()

repeating-linear-gradient()

repeating-radial-gradient()

repeating-conic-gradient()

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩