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 百分比

分開寫入

#百分號

相關文章推薦：

CSS3 製作動畫的屬性：transform屬性的介紹

###CSS3製作動畫的屬性： Animation屬性的介紹######

以上是css3中兩種漸變的實例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！