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

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

一、線性漸變屬性

1、水平方向線性漸變

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

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

2、垂直方向線性漸變

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

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

二、徑向漸變屬性

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

1、半徑的長度值

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

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

2、兩個位置關鍵字

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

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