CSS conic-gradient() ఫంక్షన్

నిర్వచనం మరియు ఉపయోగం

CSS యొక్క conic-gradient() ఫంక్షన్ కనిక్ గ్రేడియంట్ ను బ్యాక్గ్రౌండ్ ఇమేజ్ గా సెట్ చేస్తుంది.

కనిక్ గ్రేడియంట్ అనేది కేంద్ర పాయింట్ చుట్టూ వర్ణప్రవాహం అయినది (బేక్కర్ గ్రాఫ్ మరియు కలర్ స్క్వేర్ వలె పోలిస్తాయి).

కనిక్ గ్రేడియంట్ సృష్టించడానికి, కనీసం రెండు రంగు స్టాప్ పాయింట్లను నిర్వచించవలసి ఉంటుంది.

కనిక్ గ్రేడియంట్ ఉదాహరణలు:

ఇన్స్టాన్స్

ఉదాహరణ 1

మూడు రంగులు ఉన్న కనిక్ గ్రేడియంట్ ఉంది:

#grad {
  background-image: conic-gradient(ఎరుపు, పసుపు, హరితం);
}

亲自试一试

ఉదాహరణ 2

ఐదు రంగులు ఉన్న కనిక్ గ్రేడియంట్ ఉంది:

#grad {
  background-image: conic-gradient(ఎరుపు, పసుపు, హరితం, నీలం, కాలినీలం);
}

亲自试一试

ఉదాహరణ 3

మూడు రంగులు ఉన్నాయి మరియు ప్రతి రంగుకు కోణాన్ని నిర్దేశించబడిన కనిక్ గ్రేడియంట్ ఉంది:

#grad {
  background-image: conic-gradient(ఎరుపు 45deg, పసుపు 90deg, హరితం 210deg);
}

亲自试一试

ఉదాహరణ 4

border-radius: 50% చేయడం ద్వారా కనిక్ గ్రేడియంట్ బేక్కర్ గ్రాఫ్ వలె కనిపిస్తుంది:

#grad {
  background-image: conic-gradient(ఎరుపు, పసుపు, హరితం, నీలం, కాలినీలం);
  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] [at position,] color degree, color degree, ...);
值 描述
from angle 可选。整个锥形渐变将按此角度旋转。默认值为 0deg。
at position 可选。指定锥形渐变的中心位置。默认值为 center。
color degree, ..., color degree

颜色停止点是您希望在之间呈现平滑过渡的颜色。

此值由颜色值和可选的停止位置（0 到 360 度之间的角度或 0% 到 100% 之间的百分比）组成。

技术细节

版本： CSS3

浏览器支持

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

ຫົວຂໍ້ຂ້າງຄຽງ

ວິນຍານ:CSS ການປ່ຽນສະແດງ

参考：CSS background-image 属性

参考：CSS linear-gradient() ຫົວຂໍ້

参考：CSS radial-gradient() ຫົວຂໍ້

参考：CSS repeating-conic-gradient() ຫົວຂໍ້

参考：CSS repeating-linear-gradient() ຫົວຂໍ້

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