ປະຕິບັດການ CSS repeating-radial-gradient()

ການສະເໜີແລະການນໍາໃຊ້

CSS repeating-radial-gradient() ການນຳໃຊ້ປະຕິບັດການປ່ຽນສະຫຼາກລາຍກະດີວົງວຽນຄົນຫຼັງຈາກ.

ຕົວຢ່າງ:

ການປ່ຽນສະຫຼາກລາຍກະດີວົງວຽນ ການປ່ຽນສະຫຼາກລາຍກະດີວົງວຽນຄົນຫຼັງຈາກ:
radial-gradient(red, yellow, green); repeating-radial-gradient(red, yellow 10%, green 15%);

ຄວາມຈະແນະນຳ

ຕົວຢ່າງ 1

ການປ່ຽນສະຫຼາກລາຍກະດີວົງວຽນຄົນຫຼັງຈາກ:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

ທົດລອງຄິດສະບາຍ

例子 2

另一个重复的径向渐变，设置了形状大小和位置：

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

ທົດລອງຄິດສະບາຍ

例子 3

另一个重复的径向渐变，设置了两个颜色停止位置：

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

ທົດລອງຄິດສະບາຍ

ສັນຍາວິສະວະທີ CSS

repeating-radial-gradient(shape size at position, start-color, ... , last-color);
ມູນຄ່າ ການອະທິບາຍ
shape

ກໍານົດຮູບຮ່າງການສະແດງ. ມູນຄ່າທີ່ສາມາດ:

  • ellipse (ຄົງທີ່)
  • circle
size

ກໍານົດຂະໜາດຂອງການສະແດງ. ມູນຄ່າທີ່ສາມາດ:

  • farthest-corner (ຄົງທີ່)
  • closest-side
  • closest-corner
  • farthest-side
at position ກໍານົດຕຳແຫນ່ງຂອງການສະແດງ. ມູນຄ່າຄົງທີ່ "center".
start-color, ... , last-color

ສີຈົບຂອງສີຈົບຂອງທີ່ທ່ານຢາກສະແດງສະຫລົງກັນຢ່າງປອດໄພ

ມູນຄ່ານີ້ຖືກກໍານົດໂດຍມູນຄ່າສີ ແລະ ໜຶ່ງຫຼືສອງຕຳແຫນ່ງຢຸດສະຫງັກ (ສິບຕາສາມລາຍຮອງຂອງ 0% ຫາ 100% ຫຼືການຍົກສູງຕາມສາຍການສະແດງ)

ລະບົບເຕັກນິກ

ສະຖານະການ: CSS Images Module Level 3

ການສະບາຍບັນດາຊາວບັນດາບາດບານ

ຈຳນວນສະບັບໃນຕາຕະລາງອອກຄວາມທີ່ສະບາຍຕຳແຫນ່ງຫົວຂໍ້ຫຼັກນັ້ນ

Chrome Edge Firefox Safari Opera
repeating-radial-gradient()
26 10 16 6.1 12.1
ສີຈົບຂອງທີ່ຢູ່ສອງຕຳແຫນ່ງ
71 79 64 12.1 58

ເວັບໄຊທີ່ກ່ຽວຂ້ອງ

ຄູ່ມືການສະແດງຫົວຂໍ້ຫຼັກ 渐变

ກ່ຽວກັບCSS background-image 属性

ກ່ຽວກັບຫົວຂໍ້ຫຼັກ conic-gradient()

ກ່ຽວກັບຫົວຂໍ້ຫຼັກ linear-gradient()

ກ່ຽວກັບຫົວຂໍ້ຫຼັກ radial-gradient()

ກ່ຽວກັບຫົວຂໍ້ຫຼັກ repeating-conic-gradient()

ກ່ຽວກັບຕົວເລື່ອງ CSS repeating-linear-gradient()