ฟังก์ชัน 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 CSS

อ้างอิง：ฟังก์ชัน CSS conic-gradient()

อ้างอิง：ฟังก์ชัน CSS linear-gradient()

อ้างอิง：ฟังก์ชัน CSS radial-gradient()

อ้างอิง：ฟังก์ชัน CSS repeating-conic-gradient()

อ้างอิง：ฟังก์ชัน CSS repeating-linear-gradient()