深入理解 CSS 漸層 ( CSS Gradient )

這篇文章將會針對 CSS 的漸層做深入的介紹，除了常見的線性漸層、放射漸層，更會介紹最新的 conic-gradient 圓錐形漸層和 repeating 重複漸層，做出虛線的特殊效果，希望大家看完之後，能對 CSS 的漸層有更深一層的了解。

認識 CSS 漸層

漸層最基本需要兩種顏色，分別是「起點」的顏色和「終點」的顏色，設定完成後，瀏覽器會自動計算中間漸變的顏色，然而在一段漸層色當中，可以包含多種顏色，以及不同的角度、尺寸和色彩位置。

CSS 裡有四種漸層，分別是：

• linear-gradient：線性漸層
• radial-gradient：放射漸層
• conic-gradient：圓錐形漸層 ( 新的 )
• repeating-radial-gradient：放射重複漸層
• repeating-linear-gradient：線性重複漸層
• repeating-conic-gradient：圓錐形重複漸層 ( 新的 )

可以套用漸層的 CSS 屬性有兩種，分別是：

• background：元素的背景 ( 最常遇見 )
• list-style-image：清單預設的符號圖案 ( 通常可用偽元素取代 )

Linear Gradient 線性漸層

線性間曾表示沿著透過指定角度的直線，放置數個顏色，就會自動產生對應的顏色漸層，線性漸層的撰寫方式如下：

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

線性漸層在角度的定義上，必須要特別注意，如果沒有設定角度，預設從上往下 進行漸層，若設定角度，則改由左下角為圓心，和 y 軸夾角作為角度的設定，因此若設定為 0deg，會指向正上方，則變成從下往上，正角度表示順時針旋轉，若設定 180deg 則指向正下方，除了用角度表示漸層方向，也可以撰寫方向屬性，例如 to top 就是從下往上，to top right 就是從下方往右上方延伸。

舉例來說，有一個 200 x 150 的 div，套用下方的五種寫法，最後呈現的結果都會是一樣的。

linear-gradient(red, yellow);
linear-gradient(to bottom, red, yellow);
linear-gradient(180deg,red, yellow);
linear-gradient(to top, yellow, red);
linear-gradient(to bottom, red 0%, yellow 100%);

除了單純寫出顏色，也可以透過顏色後方的參數，設定顏色在漸層中的位置，設定參數有幾個重點：

• 0% 表示起始邊界，100% 表示結束邊界 ( 邊界為填色的區外邊界 )。
• 如果沒有指定參數，則會自動等比例分配。
• 如果沒有指定第一個參數，預設 0%。
• 如果沒有指定最後一個參數，預設 100%。
• 參數可以使用 px 做精準的設定。

下方幾個例子，將會使用一個 150 x 150 的正方形 div，展示不同的線性漸層效果

• 多種顏色漸層

  因為沒有設定顏色位置參數，所以三種顏色平均分配漸層位置，分別是 0% 50% 100%。

    background:linear-gradient(red, yellow, red);
  

• 顏色位置重疊

  如果兩種顏色位置重疊，結果將會直接呈現兩種顏色交界，若前後邊界沒有設定顏色，則會以最靠近該邊界的顏色補滿。

    background:linear-gradient(45deg, red 50%, black 50%);
  

  如果多一點顏色，就能做出彩虹的效果。

    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%);
  

  如果設定每個顏色的位置不要重疊在一起，就會看見邊緣出現漸層的顏色。

    background:linear-gradient( 90deg,
      red 0%, red 10%,
      orange 15%, orange 25%,
      yellow 30%, yellow 40%,
      green 45%, green 55%,
      blue 60%, blue 70%,
      indigo 75%, indigo 85%,
      black 100%);
  

• 搭配背景圖尺寸，用漸層做特別的圖案

  下面這個例子比較特別，除了使用線性漸層，也透過 background 的background-position和background-size屬性，指定不同的色塊要放置的位置，所以在 CSS 會看到漸層的後方還有額外的參數，這些參數在斜線 / 之前是背景位置，後方是背景尺寸，設定完成後，記得在最後補上 no-repeat，避免背景重複而影響了效果。

  該效果在使用圓錐形漸層 Conic Gradient 實作更簡單 ( 繼續往下會有介紹 )

    background:
      linear-gradient(45deg,#f00 50%, transparent 50%) 0 0/50% 50%,
      linear-gradient(90deg,#f90 50%, transparent 50%) 0 0/100% 50%,
      linear-gradient(135deg,#fe0 50%, transparent 50%) 100% 0/50% 50%,
      linear-gradient(180deg,#0c6 50%, transparent 50%),
      linear-gradient(225deg,#09f 50%, transparent 50%),
      linear-gradient(270deg,#05c 50%, transparent 50%) -50% -50%,
      linear-gradient(315deg,#95c 50%, transparent 50%),
      linear-gradient(360deg,#60a 50%, transparent 50%);
    background-repeat:no-repeat;
  

Radial Gradient 放射漸層

放射漸層跟線性漸層一樣，會依據設定的顏色填滿整個區域，但放射漸層是從單個點出發為顏色起始點，以圓形 Circle 或橢圓 Ellipse 的方式放射向外延伸，放射漸層的撰寫方式如下：

background:radial-gradient(方式 尺寸 at 位置, 顏色1 位置, 顏色2 位置);

放射漸層的方式分成圓形 Circle 和橢圓 Ellipse，如果設定圓形，額外設定尺寸時，僅需設定一組數字，如果是橢圓形，則可以設定 x 軸與 y 軸的尺寸，下方的例子用一個 300 x 100 長方形的 div 來表現，就能明顯看出圓形和橢圓形的效果差異。

// 這是圓形
background:radial-gradient(circle at center,yellow,red);

// 這是橢圓
background:radial-gradient(ellipse at center,yellow,red);

放射漸層可以透過下列四種屬性，設定放射的半徑，四種屬性分別是：

• closest-side：最近邊
• farthest-side：最遠邊
• closest-corner：最近角
• farthest-corner：最遠角 ( 預設值 )

對應的效果展示如下：

// closest-side 最近邊
background:radial-gradient(circle closest-side at center,yellow,red);

// farthest-side 最遠邊
background:radial-gradient(circle farthest-side at center,yellow,red);

// closest-corner 最近角
background:radial-gradient(circle closest-corner at left,yellow,red);

// farthest-corner 最遠角 ( 預設值 )
background:radial-gradient(circle farthest-corner at left,yellow,red);

如果設定為橢圓形 ellipse 的放射模式，也可以直接指定 x 軸與 y 軸的尺寸，下方的例子，將 x 軸設定為寬度的 80%，y 軸設定為高度的 20%。

background:radial-gradient(ellipse 80% 20% at center,#ff0,#000);

放射漸層可以指定多種顏色進行漸層效果，產生的效果則以同心圓的方式呈現，下面的例子使用 150 x 150 的 div 呈現效果。

background:radial-gradient(ellipse at center,
    #f00 0%, #f90 20%,#fe0 40%,#0c6 60%,#09e 80%,#60c 100%);

如果將顏色重疊，結果將會直接呈現兩種顏色交界，做出類似色塊的同心圓效果。

background:radial-gradient(ellipse at center,
    #f00 0%, #f00 20%,
    #f90 20%, #f90 40%,
    #fe0 40%, #fe0 60%,
    #0c6 60%, #0c6 80%,
    #09e 80%, #09e 100%);

如果在做得精細一點，也能將 div 透過漸層色模擬一個立體的圓球。

div{
    width:150px;
    height:150px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 25%,
        #fff 0,#ccc 20%,#999 40%,#000 90%,#666 95%,#999 100%);
}

Conic Gradient 圓錐形漸層

圓錐形漸層 Conic Gradient 是 CSS Level 4 才出現的背景漸層屬性，主要用來彌補線性漸層和放射狀漸層的不足，漸層的方式可以指定百分比 % 或是角度 deg，例如有一個 200 x 200 的 div，套用下方的寫法，就會出現從黑到白的圓錐形背景色。

background:conic-gradient(white, black);

透過圓錐形漸層可以輕鬆實現彩虹的效果。

background:conic-gradient(#f00, #f50, #ff0, #0c0, #09d, #03a, #909, #f00);

指定對應角度，就能做出色塊形狀的彩虹效果。

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
);

熟練圓錐形背景漸層，也可以很簡單地做出圓餅圖。

div{
    width:200px;
    height:200px;
    border-radius:50%;
    background:conic-gradient(
        #fc0 0, 
        #fc0 45deg,
        #59f 45deg
    );
}

Repeating Gradients 重複漸層

Repeating Gradients 重複漸層是 CSS 比較新的屬性？過去我們要做到重複的漸層效果，往往會透過background-size搭配background-repeat來實現，如今透過重複漸層的 CSS，就能輕鬆實現重複效果。

• repeating-linear-gradient 線性重複漸層

  線性重複漸層只需要指定需要重複的顏色位置，沒有指定的部分，將由瀏覽器自動計算補滿，以下方的例子來說，僅需指定兩種顏色，位置擺放在 5% 和 10%，最後的結果就會自動重複。

    background:repeating-linear-gradient(45deg, 
        #000 0, #000 5%, 
        #f90 5%, #f90 10%);
  

• repeating-linear-gradient 放射重複漸層

  透過重複漸層，就能做出類似陰影的效果，套用在放射漸層更別有一番趣味。

    background:repeating-radial-gradient(circle, 
        #000 0, #000 5%, 
        #f90 5%, #f90 10%,
        #a50 18%);
  

  運用線性重複漸層，將 div 的高度縮小，就能做出各種有趣的「虛線效果」。

    div{
        width:200px;
        height:3px;
        background:repeating-linear-gradient(90deg, 
            #000 0, #000 8px, transparent 8px, transparent 15px);
    }
  

    div{
        width:200px;
        height:3px;
        background:repeating-linear-gradient(90deg, 
            #000 0, #000 8px, 
            transparent 8px, transparent 10px, 
            #000 10px, #000 12px,
            transparent 12px, transparent 20px
            );
    }
  

• repeating-conic-gradient 圓錐形重複漸層

  透過圓錐形重複漸層，可以非常簡單地做出放射線的背景效果。

    background:repeating-conic-gradient(
        #f00 0, 
        #f00 15deg,
        #fa0 15deg,
        #fa0 30deg
    );
  

  搭配放射漸層，就能做出更多有趣的效果。

    div{
        width:200px;
        height:200px;
        position:relative;
        background:radial-gradient(circle at 50% 50%,
            #fff 5%, 
            rgba(255,255,255,0) 50%,
            #fff 70%,
            #fff 100%
        ),repeating-conic-gradient(
            #f00 0, 
            #f00 15deg,
            #fa0 15deg,
            #fa0 30deg
        );
    }
  

  搭配background-size，能做出賽車旗的效果。

    div{
        width:200px;
        height:200px;
        position:relative;
        background:repeating-conic-gradient(
            #fff 0, 
            #fff 90deg,
            #000 90deg,
            #000 180deg
        );
        background-size:20% 20%
    }
  

參考

• CSS Images Module Level 3 - Gradients
• CSS Image Values and Replaced Content Module Level 4 - Gradients
• Ultimate CSS Gradient Generator