漸變屬性是實現漸變效果的重要方式，其中包括線性漸變、徑向漸變和重復漸變。
線性漸變：在線性漸變過程中，起始顏色會沿着一條直線按順序過渡到結束顏色。
基本語法為 bacground-image：linear-gradient（漸變角度，起始顏色，結束顏色）。
此效果是通過線性漸變屬性實現的，按照30度的角度值，由粉色漸變為紅色，代碼
如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-image: linear-gradient(30deg,pink,red); margin: 0 auto; } </style> </head> <body> <div></div> </body> </html>
漸變屬性的屬性值一個是漸變角度，一個是顏色，而漸變角度指的是水平線和漸變線
之間的夾角，角度值以deg為單位，也可用to+方向設置漸變角度。0deg對應“to top”
90deg對應“to right”，180deg對應“to bottom“，270deg對應”to left“，以0deg為起點
，順時針旋轉，如圖下：
徑向漸變：在徑向漸變過程中，起始顏色會從一個中心點開始，依據橢圓或圓形形狀
進行擴張漸變。
基本語法為：background-image：radial-gradient（漸變形狀 圓心位置，起始顏色，結束顏色）
漸變形狀：1、像素值/百分比：用於定義形狀的水平和垂直半徑。
2、circle：指定圓形的徑向漸變。
3、ellipse：指定橢圓形的徑向漸變。
圓心位置：1、像素值/百分比：用於定義圓心的水平和垂直坐標，可以為負值。
2、left：設置左邊為徑向漸變圓心的橫坐標值。
3、center：設置中間為徑向漸變圓心的橫坐標或縱坐標。
4、right：設置右邊為徑向漸變圓心的橫坐標值。
5、top：設置頂部為徑向漸變圓心的縱坐標。
6、bottom：設置底部為徑向漸變圓心的縱坐標。
在代碼中，漸變形狀和圓心位置之間通過at連接，該圖為以中間為圓心，按照橢圓形進行徑向漸變。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-image: radial-gradient(ellipse at center,pink,red); margin: 0 auto; } </style> </head> <body> <div></div> </body> </html>
重復漸變：包括重復線性漸變和重復徑向漸變，用於實現重復漸變效果。
基本語法：background-image：repeating-linear-gradient （重復線性漸變）
background-image：repeating-radial-gradient （重復線性漸變）
該圖為重復線性漸變，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-image: repeating-linear-gradient(0deg,pink,red,orange,white); margin: 0 auto; } </style> </head> <body> <div></div> </body> </html>
該圖為重復徑向漸變，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-image: repeating-radial-gradient(circle at center,pink,red,orange,white); margin: 0 auto; } </style> </head> <body> <div></div> </body> </html>