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

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

ฟังก์ชันนี้ใช้กับคุณสมบัติที่ กำหนดภาพพื้นหลัง: background, background-image หรือภาพขอบ: border-image, background-image-source

ไวยากรณ์

selector {
	background: repeating-linear-gradient([ทิศทาง], สี1 ขนาด1, สี2 ขนาด2...);
}

ค่า

ค่า	คำอธิบาย
ทิศทาง	กำหนดทิศทางที่แน่นอนของกราฟิเอนท์ใน หน่วยของมุม ใดๆ หรือด้วยคีย์เวิร์ด `top`, `left`, `right`, `bottom` หรือการผสมกันของคีย์เวิร์ดเหล่านี้ ลำดับของคำไม่สำคัญ พารามิเตอร์นี้เป็นตัวเลือก: หากไม่เขียน กราฟิเอนท์จะวิ่งจากบนลงล่าง หน้าทิศทางจะใส่คำว่า `to`
มุม	มุมใน หน่วยของมุม ใดๆ สามารถเป็นบวกหรือลบได้ พารามิเตอร์นี้เป็นตัวเลือก สามารถ กำหนดได้อย่างใดอย่างหนึ่งระหว่างมุมหรือทิศทาง (หรือไม่กำหนดอะไรเลยก็ได้)
สี1	สีเริ่มต้นของกราฟิเอนท์ใน หน่วยของสี ใดๆ
สี2	สีสุดท้ายของกราฟิเอนท์ใน หน่วยของสี ใดๆ
ขนาด	กำหนดความยาวของสีที่แน่นอนของกราฟิเอนท์ ใน หน่วยของขนาด ใดๆ

ตัวอย่าง . รูปแบบที่ง่ายที่สุด

กราฟิเอนท์จะหน้าตาแบบนี้: จาก 0px ถึง 20px เป็นสีแดงเต็มๆ, จาก 20px ถึง 40px - กราฟิเอนท์จากสีแดงไปเป็นสีฟ้า และจะทำซ้ำจากบนลงล่าง (นั่นคือ กราฟิเอนท์แบบซ้ำ):

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

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

ตัวอย่าง . สีที่ชัดเจน

กราฟิเอนท์จะหน้าตาแบบนี้: จาก 0px ถึง 20px เป็นสีแดงเต็มๆ, จาก 20px ถึง 40px - เป็นสีฟ้าเต็มๆ (จุดเด่นคือ สีที่สองเริ่มต้นตรงจุดที่สีแรกสิ้นสุดลง) และจะทำซ้ำจากบนลงล่าง:

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

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

ตัวอย่าง . เปลี่ยนทิศทาง

ตอนนี้ทิศทางของกราฟิเอนท์จะวิ่งจากขวาไปซ้าย:

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

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

ตัวอย่าง . ทิศทางเป็นองศา

เป็นทิศทางที่กำหนดมุมเป็นองศา:

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

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

ตัวอย่าง . ค่าลบ

กำหนดทิศทางเป็นค่าลบ:

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

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

ดูเพิ่มเติม

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