CSS中Gradient有多少種漸變

小編給大家分享一下CSS中Gradient有多少種漸變，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、線形漸變，顏色值沿著一條隱式的直線逐漸過渡。

由 linear-gradient() 產生。

為了創建一個線性漸變，你必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。

/* 漸變軸為45度，從藍色漸變到紅色 */
linear-gradient(45deg, blue, red);
/* 從右下到左上、從藍色漸變到紅色 */
linear-gradient(to left top, blue, red);
/* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束 */
linear-gradient(0deg, blue, green 40%, red);

2、徑向漸變，圖像的顏色值由中心點（原點）向外擴散并逐漸過渡到其他顏色值。

同樣至少需要定義兩種顏色節點，也可以指定漸變的中心（默認在中心點，center）、形狀（默認橢圓形 ellipse）、大小（默認 farthest-corner，表示到最遠的角落）

語法

radial-gradient(
  [shape size at position] ?
   [ , ]+
)

3、重復漸變，重復多次漸變圖案直到足夠填滿指定元素。

由 repeating-linear-gradient() 和 repeating-radial-gradient() 函數產生。

重復函數的參數同上，不同的是它會基于漸變長度（最后一個色標和第一個之間的距離）倍數重復。

.linear-repeat {  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}.radial-repeat {  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}

以上是“CSS中Gradient有多少種漸變”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！