CSS radial-gradient() function

Paglilinaw at paggamit

CSS radial-gradient() Ang function na nagtatakda ng radyal na paglaya ng kulay bilang background image.

Ang radyal na paglaya ng kulay ay tinukoy ng kanyang sentro.

Para sa paglikha ng radyal na paglaya ng kulay, dapat magpakilala ng kahit anong dalawang kaibhan ng kulay.

Halimbawa ng radyal na paglaya ng kulay:

Mga halimbawa

Halimbawa 1

Panghihiling ng kaibhan ng kulay na magkakaibang radyal na paglaya ng kulay:

#grad {
  background-image: radial-gradient(red, green, blue);
}

亲自试一试

Halimbawa 2

Panghihiling ng kaibhan ng kulay na magkakaibang radyal na paglaya ng kulay:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

亲自试一试

例子 3

圆形形状的径向渐变：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

亲自试一试

例子 4

使用不同大小关键词的径向渐变：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

亲自试一试

CSS 语法

radial-gradient(shape size at position, start-color, ... , last-color);

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

教程：CSS 渐变

参考：CSS background-image Attribute

参考：CSS conic-gradient() 函数

参考：CSS linear-gradient() 函数

参考：CSS repeating-conic-gradient() 函数

参考：CSS repeating-linear-gradient() 函数

参考：CSS repeating-radial-gradient() 函数