深入理解CSS 漸層( CSS Gradient ) | CSS 彩虹 漸層
![深入理解CSS 漸層( CSS Gradient )](https://i.imgur.com/axBPWDg.jpg)
這篇文章將會針對CSS的漸層做深入的介紹,除了常見的線性漸層、放射漸層,更會介紹最新的conic-gradient圓錐形漸層和repeating重複漸層,做出虛線的特殊效果,希望大家看完之後,能對CSS的漸層有更深一層的了解。認識CSS漸層漸層最基本需要兩種顏色,分別是「起點」的顏色和「終點」的顏色,設定完成後,瀏覽器會自動計算中間漸變的顏色,然而在一段漸層色當中,可以包含多種顏色,以及不同的角度、尺寸和色彩位置。CSS裡有四種漸層,分別是:linear-gradient:線性漸層radial-gradient:放射漸層conic-gradient:圓錐形漸層(新的)rep...
![深入理解CSS 漸層( CSS Gradient )](http://pix4.agoda.net/hotelimages/4172139/0/24097f8fc1c9959ea5062e8d6497eaad.jpg?s=800x)
這篇文章將會針對 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...取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
CSS 漸層-多層次漸層 | CSS 彩虹 漸層
CSS3 Gradients 漸層效果 | CSS 彩虹 漸層
CSS3 漸層 | CSS 彩虹 漸層
CSS3漸層產生器 | CSS 彩虹 漸層
【靈感來源】Fresh Background Gradients | CSS 彩虹 漸層
一起幫忙解決難題,拯救IT 人的一天 | CSS 彩虹 漸層
使用CSS3輕鬆寫出MAC彩虹球效果 | CSS 彩虹 漸層
深入理解CSS 漸層( CSS Gradient ) | CSS 彩虹 漸層
漸層linear | CSS 彩虹 漸層
![](https://i.imgur.com/axBPWDg.jpg)