ฟังก์ชัน repeating-linear-gradient() ของ CSS

การกำหนดและการใช้งาน

CSS repeating-linear-gradient() ฟังก์ชันใช้สำหรับสีเปลี่ยนแปลงทางทิศทางทิศทางทิศ

ตัวอย่าง:

สีเปลี่ยนแปลง สีเปลี่ยนแปลงทางทิศทางทิศทางทิศทางทิศ
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

ตัวอย่าง

ตัวอย่าง 1

กราดทางที่สร้างขึ้นแบบส่วนตัว

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

ทดลองเอง

ตัวอย่าง 2

กราดทางที่สร้างขึ้นแบบส่วนตัว

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

ทดลองเอง

สyntax CSS

repeating-linear-gradient(angle to side-or-corner, color-stop1, color-stop2, ...);
ค่า คำอธิบาย
angle กำหนดมุมทิศทางของกราด มีมุมที่มาตั้งแต่ 0deg ถึง 360deg มาตราฐานคือ 180deg
side-or-corner

กำหนดตำแหน่งจุดเริ่มต้นของกราด

มันประกอบด้วยคำที่สองสำหรับแนวทาง: คำแรกเป็นทิศทางนอร์ท (left หรือ right) และคำที่สองเป็นทิศทางแนวตั้ง (top หรือ bottom)

ลำดับไม่ได้เป็นประโยชน์ และทุกคำที่ใช้งานเป็นทางเลือก
color-stop1, color-stop2,...

จุดสิ้นสุดสีเป็นสีที่คุณต้องการที่จะแสดงการเปลี่ยนแปลงสีสม่ำสมอ

ค่านี้ประกอบด้วยค่าสี และตำแหน่งหยุดทางเลือก (เปอร์เซ็นต์ 0% ถึง 100% หรือยาวของแนวกราด)

รายละเอียดเทคนิค

เวอร์ชัน: CSS Images Module Level 3

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้แสดงว่าเวอร์ชันเบราเซอร์ที่สนับสนุนฟังก์ชันนี้ครบถ้วน

Chrome Edge Firefox Safari Opera
repeating-linear-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-radial-gradient() ฟังก์ชัน