CSS中Gradient有多少種漸變

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

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

由 linear-gradient() 產(chǎn)生。

為了創(chuàng)建一個線性漸變，你必須至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以設(shè)置一個起點和一個方向（或一個角度）。

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

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

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

語法

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

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

由 repeating-linear-gradient() 和 repeating-radial-gradient() 函數(shù)產(chǎn)生。

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

.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有多少種漸變”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！