深入理解CSS 漸層( CSS Gradient ) | border-color漸層
這篇文章將會針對CSS的漸層做深入的介紹,除了常見的線性漸層、放射漸層,更會介紹最新的conic-gradient圓錐形漸層和repeating重複漸層,做出虛線的特殊效果,希望大家看完之後,能對CSS的漸層有更深一層的了解。認識CSS漸層漸層最基本需要兩種顏色,分別是「起點」的顏色和「終點」的顏色,設定完成後,瀏覽器會自動計算中間漸變的顏色,然而在一段漸層色當中,可以包含多種顏色,以及不同的角度、尺寸和色彩位置。CSS裡有四種漸層,分別是:linear-gradient:線性漸層radial-gradient:放射漸層conic-gradient:圓錐形漸層(新的)rep...
這篇文章將會針對 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, ye...