CSS3漸變屬性是CSS3規(guī)范中新增的一個(gè)屬性，它可以讓我們在網(wǎng)頁中制作出豐富的顏色漸變效果，為網(wǎng)頁增加更多的美感和視覺效果。下面，我們來介紹一下CSS3漸變屬性的具體內(nèi)容。

CSS3漸變屬性分為線性漸變和徑向漸變，其中線性漸變又分為水平方向和垂直方向。

一、線性漸變屬性

1、水平方向線性漸變

語法：background: linear-gradient(to right, #00FFFF, #FF00FF);

解析：to right表示從左往右漸變，#00FFFF和#FF00FF表示變化的顏色，可以設(shè)定多組色值。

2、垂直方向線性漸變

語法：background: linear-gradient(to bottom, #00FFFF, #FF00FF);

解析：to bottom表示從上往下漸變，#00FFFF和#FF00FF表示變化的顏色，可以設(shè)定多組色值。

二、徑向漸變屬性

徑向漸變的語法寫法和線性漸變類似，也有兩類：半徑的長度值和兩個(gè)位置關(guān)鍵字。其中，第一個(gè)位置關(guān)鍵字表示圓心，x軸方向左為負(fù)值，右為正值，y軸方向上為負(fù)值，下為正值；第二個(gè)位置關(guān)鍵字表示漸變的開始位置，其值的規(guī)則與第一個(gè)位置關(guān)鍵字相同。

1、半徑的長度值

語法：background: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF, #FF00FF);

解析：ellipse表示為橢圓形，farthest-corner表示為最遠(yuǎn)角，45px和45px為圓心坐標(biāo)，#00FFFF和#FF00FF表示漸變的顏色，可以設(shè)定多組色值。

2、兩個(gè)位置關(guān)鍵字

語法：background: radial-gradient(at top left, #00FFFF, #FF00FF);

解析：at top left表示漸變中心在左上角，#00FFFF和#FF00FF表示變化的顏色，可以設(shè)定多組色值。