ກອງການ CSS repeating-conic-gradient()

ການອະທິບາຍແລະການນໍາໃຊ້

CSS repeating-conic-gradient() ກອງການສະເພາະການປ່ຽນສະເທືອກຫົວກັນ.

ຕົວຢ່າງ:

ການປ່ຽນສະເທືອກຫົວ ການປ່ຽນສະເທືອກຫົວກັນ
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

实例

例子 1

一个重复的锥形渐变：

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

亲自试一试

例子 2

定义了颜色起点和终点的重复锥形渐变：

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

亲自试一试

例子 3

另一个设置了起始角度和中心位置的重复锥形渐变：

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

亲自试一试

CSS 语法

repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);
值 描述
from angle

可选。整个锥形渐变按此角度旋转。

默认值为 0deg。
at position

可选。指定锥形渐变的中心点。

默认值为 center。
color degree, ..., color degree

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

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

ຂໍ້ມູນດ້ານເຕັກນິກ

ຮູບແບບ CSS Images Module Level 4

ການສະແດງກະພິບຂອງສະຫຼັດຜູ້ໃຊ້

ຈຳນວນສະຖານະການໃນຕາມບັນດາສະຖານະການທີ່ພວກພະນັກງານຄົ້ນຫາວ່າສະແດງການສະແດງກະພິບທີ່ສົມບູນ

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

ບັນດາໜ້າທີ່ກ່ຽວຂ້ອງ

ຄູ່ມືອອກສາຍຫົວຂໍ້ການປ່ຽນສະແດງຮູບລະບາຍ

ກໍາເຫດອອກນູວCSS background-image 属性

ກໍາເຫດອອກນູວຫົວຂໍ້ການປ່ຽນສະແດງຮູບລະບາຍສະແດງລະຫວ່າງສີກະຈັດກະພິບທີ່ຕັ້ງຕາມກະພິບ

ກໍາເຫດອອກນູວຫົວຂໍ້ການປ່ຽນສະແດງຮູບລະບາຍສະແດງລະຫວ່າງສີກະຈັດກະພິບທີ່ຫລອມທັງໝົດ

ກໍາເຫດອອກນູວຫົວຂໍ້ການປ່ຽນສະແດງຮູບລະບາຍສະແດງລະຫວ່າງສີກະຈັດກະພິບທີ່ບໍ່ຫລອມກັນ

ກໍາເຫດອອກນູວພາສາCSS repeating-linear-gradient()

ກໍາເຫດອອກນູວຫົວຂໍ້ການປ່ຽນສະແດງຮູບລະບາຍສະແດງລະຫວ່າງສີກະຈັດກະພິບທີ່ຫລອມກັນ