ฟังก์ชัน repeating-radial-gradient

ฟังก์ชัน repeating-radial-gradient กำหนดการไล่ระดับสีรัศมีแบบทำซ้ำ นั่นหมายความว่าเรากำหนดรูปแบบ การไล่ระดับสี เช่น จาก 0px ถึง 10px - การไล่ระดับสีจากสีแดงไปยังสีฟ้า และ การไล่ระดับสีนี้จะทำซ้ำไปทั่วทั้งบล็อก: จาก 0px ถึง 10px, จาก 10px ถึง 20px, จาก 20px ถึง 30px และต่อไปเรื่อยๆ

ฟังก์ชันทำงานกับพารามิเตอร์เดียวกันกับ radial-gradient ความแตกต่างอยู่ที่เอฟเฟกต์การทำซ้ำเท่านั้น สำหรับพารามิเตอร์ที่รับ ดูได้ที่คำอธิบายของ radial-gradient

ไวยากรณ์

selector {
	background: repeating-radial-gradient([รูปร่าง ประเภท ตำแหน่ง], สี1 ขนาด1, สี2 ขนาด2...);
}

ตัวอย่าง

วงกลม同心:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

ตัวอย่าง

วงรี同心:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
	width: 400px;
	height: 200px;
}

ตัวอย่าง

วางวงกลม同心ไม่ให้อยู่กลาง แต่ให้อยู่ริม:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

ดูเพิ่มเติม

ฟังก์ชัน repeating-linear-gradient,
ซึ่งสร้างการไล่ระดับสีเชิงเส้นแบบทำซ้ำ
ฟังก์ชัน linear-gradient,
ซึ่งสร้างการไล่ระดับสีเชิงเส้น
ฟังก์ชัน radial-gradient,
ซึ่งสร้างการไล่ระดับสีรัศมี