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

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

CSS repeating-conic-gradient() ฟังก์ชันใช้สำหรับทบาทเรียนความเรียงตัวทรงกรวยระยะยาว

ตัวอย่าง：

ทบาทเรียนความเรียงตัวทรงกรวย ทบาทเรียนความเรียงตัวทรงกรวยระยะยาว
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

ตัวอย่าง

ตัวอย่าง 1

งานกราดกรวยที่ซ้ำ:

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

ทดลองด้วยตัวเอง

ตัวอย่าง 2

งานกราดกรวยที่กำหนดจุดเริ่มต้นและจุดสิ้นสุดสี:

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 3

อีกงานกราดกรวยที่กำหนดมุมเริ่มต้นและจุดกลาง:

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

ทดลองด้วยตัวเอง

การใช้งานภาษา CSS

repeating-conic-gradient([from angle], [at position,] color degree, color degree, ... );
ค่า การอธิบาย
from angle

เลือกได้. ทั้งงานกราดกรวยทั้งหมดหมุนโดยมุมนี้

ค่าเริ่มต้นคือ 0deg
at position

เลือกได้. กำหนดจุดกลางของงานกราดกรวย

ค่าเริ่มต้นคือ center
color degree, ... , color degree

จุดสิ้นสุดสีคือสีที่คุณต้องการที่จะแสดงการเปลี่ยนแปลงสีโดยสมบูรณ์

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

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

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

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

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

หน้าที่เกี่ยวข้อง

ตัวอย่าง:งานกราด CSS

อ้างอิง:ตัวอย่างคุณภาพและความปลอดภัยของฟอนต์เน็ท CSS

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

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

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

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

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