css3 漸變

mySoul發表於2018-08-09

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

漸變

漸變分為兩種漸變,一種是線性漸變,一種是徑向漸變

線性漸變

線性漸變為向上,向下,向左,向右兩種漸變方式。

linear-gradient()函式

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

css3 漸變

// 漸變軸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 百分比

此處輸入圖片的描述

分開寫

此處輸入圖片的描述

百分號

此處輸入圖片的描述

相關文章