css3中兩種漸層的執行個體介紹

本篇文章給大家帶來的內容是關於css3中兩種漸層的執行個體介紹 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

css3
ps: css越來越真正的像一門語言了，css已經有變數了，剛剛看到文檔中。一個實驗性質的功能。

漸層

漸層分為兩種漸層，一種是線性漸層，一種是放射狀漸層

線性漸層

線性漸層為向上，向下，向左，向右兩種漸層方式。

linear-gradient()函數

此為css的一個函數。線性漸層由一個軸即梯度線構成。其上的每個點具有兩種或多種顏色。其軸上的每個點具有獨立的顏色。為了構建出平滑的漸層，該函數還會構建一系列的著色線。每一條著色線的顏色還會取決於與之垂直相交的漸層線上的色點。

// 漸層軸45度，重藍色到紅色linear-gradient(45deg, blue, red);

// 從右下到左上，藍色漸層到紅色linear-gradient(to left top, blue, red);

// 從下到上，從藍色開始漸層、到高度40%位置是綠色漸層開始、最後以紅色結束 linear-gradient(0deg, blue, green 40%, red)

ps 透明度為rgba的最後一個參數

放射狀漸層

放射狀漸層由其中心點，邊緣形狀，輪廓，及其位置，和色值結束點組成。
放射狀漸層由橢圓不斷的組成

第一個參數

第一個參數一般都可省，

closest-side

closest-corner

closest-side

farthest-corner

circle at 百分比

分開寫

百分比符號