css3漸層屬性有哪些

                    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表示變化的顏色，可以設定多組色值。

以上就是CSS3漸變屬性的具體介紹，透過使用CSS3漸層屬性可以做出許多酷炫的效果，它對於網頁的美化起到了很大的作用                

#############

以上是css3漸層屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！