深入理解 CSS 漸層 ( CSS Gradient )

自從 CSS3 普及以來,許多網站都能看到透過 CSS 所做出的漸層效果,這篇文章將會針對 CSS 的漸層做深入的介紹,除了常見的線性漸層、放射漸層,也會介紹透過重複漸層的屬性,做出虛線的特殊效果,希望大家看完之後,能對 CSS 的漸層有更深一層的了解。

認識 CSS 漸層

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

CSS 裡有四種漸層,分別是:

  • linear-gradient 線性漸層
  • repeating-linear-gradient 線性重複漸層
  • radial-gradient 放射漸層
  • repeating-radial-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%);

深入理解 CSS 漸層 ( CSS Gradient )

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

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

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

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

深入理解 CSS 漸層 ( CSS Gradient )

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

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

深入理解 CSS 漸層 ( CSS Gradient )

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

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

深入理解 CSS 漸層 ( CSS Gradient )

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

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

深入理解 CSS 漸層 ( CSS Gradient )

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

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

深入理解 CSS 漸層 ( CSS Gradient )

如果在做得精細一點,也能將 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%);
}

深入理解 CSS 漸層 ( CSS Gradient )

Repeating Gradients 重複漸層

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

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

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

深入理解 CSS 漸層 ( CSS Gradient )

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

深入理解 CSS 漸層 ( CSS Gradient )

參考

有興趣瞧瞧其他新文章嗎?