CSS conic-gradient() function

paglilingkuran at paggamit

CSS ng konik-gradyento() Ang function ay nagtatakda ng konik-gradyento bilang background image.

Ang konik-gradyento ay isang uri ng pagbabagong kulay na umiikot sa gitna ng punto (katulad ng pampalad at serupan ng kulay);

Upang lumikha ng konik-gradyento, dapat na kahit anong dalawang kulay na stop point ang ayon;

Halimbawa ng konik-gradyento:

Mga halimbawa

Eli 1

May tatlong kulay na konik-gradyento;

#grad {
  background-image: konik-gradyento(red, yellow, green);
}

亲自试一试

Eli 2

May limang kulay na konik-gradyento;

#grad {
  background-image: konik-gradyento(red, yellow, green, blue, black);
}

亲自试一试

Eli 3

May tatlong kulay at para sa bawat kulay ay tinukoy na ang angle ng konik-gradyento;

#grad {
  background-image: konik-gradyento(red 45deg, yellow 90deg, green 210deg);
}

亲自试一试

Eli 4

Sa pagdaragdag ng border-radius: 50% ang konik-gradyento ay mukhang pampalad;

#grad {
  background-image: konik-gradyento(red, yellow, green, blue, black);
  border-radius: 50%;
}

亲自试一试

例子 5

带有起始角度的锥形渐变：

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 6

带有中心位置的锥形渐变：

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 7

同时带有起始角度和中心位置的锥形渐变：

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

亲自试一试

例子 8

另一个饼图示例：

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

亲自试一试

CSS 语法

background-image: conic-gradient([from angle] position,] color degree, color degree, ... );

技术细节

浏览器支持

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

相关页面

教程：CSS 渐变

参考：Attribute ng background-image ng CSS

参考：CSS linear-gradient() 函数

参考：CSS radial-gradient() 函数

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

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

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