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([من زاوية][في الموقع,] زاوية الألوان, زاوية الألوان, ... );

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل لأول مرة.

الصفحات ذات الصلة

دليل التعليمات:تدرج CSS

المرجع:خصوصیت background-image CSS

المرجع:وظيفة CSS linear-gradient()

المرجع:وظيفة CSS radial-gradient()

المرجع:وظيفة CSS repeating-conic-gradient()

المرجع:وظيفة CSS repeating-linear-gradient()

المرجع:دالة repeating-radial-gradient() CSS