CSS漸變屬性(gradient)的用法

2021-09-25 09:10:46 字數 566 閱讀 5896

漸變分為線性漸變和徑向漸變,所謂漸變就是幾種顏色之間的平穩過渡。

線性漸變

線性漸變(linear-gradient)

實現線性漸變,你至少需要定義兩種顏色的結點,這兩種結點就是你想平穩過渡的顏色,即:其中一種顏色結點為起點,另一種顏色結點為結束點。

書寫:background: linear-gradient(color1,color2); 

color1為起點結點,color2為結束點結點。

同時也可以定義漸變的方向,是從上到下漸變,還是從左至右漸變,或者從右至左漸變,預設情況下是從上至下漸變的。

書寫:background: linear-gradient(direction,colro1,color2);

direction表示漸變的方向,此值直接寫方向的起點即可,如:漸變方向為從左至右,直接寫left即可,漸變方向為從下至上,直接寫bottom即可。

當然也可以對角漸變,如:從左上角到右下角,書寫為background: linear-gradient(left top,color1,color2);

預設漸變方向是從上至下漸變:

**: 

CSS屬性之漸變屬性(gradient)

漸變分為線性漸變和徑向漸變,所謂漸變就是幾種顏色之間的平穩過渡。實現線性漸變,你至少需要定義兩種顏色的結點,這兩種結點就是你想平穩過渡的顏色,即 其中一種顏色結點為起點,另一種顏色結點為結束點。書寫 background linear gradient color1,color2 color1為起點...

css3 Gradient漸變效果

雖然css3的漸變屬性在眾瀏覽器中得到較好的支援,但在實際使用的時候也像製作軟體 photoshop cs6 firework cs6等 的漸變工具一樣,將漸變分成了幾種 線性漸變 linear gradients 徑向漸變 radial gradients 重複線性漸變和重複徑向漸變。國外乙個根據...

漸變填充Gradient

漸變,是指逐漸的,有規律性的變化,是一種規律性很強的現象。qt提供了乙個與漸變相關的qgradient類,目前支援三種漸變畫刷,分別是線性漸變 qlineargradient 輻射漸變 qradialgradient 角度漸變 qconicalgradient 如下圖所示 從左到右依次為 線性漸變 ...