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

การประกาศและการใช้งาน

CSS ของ conic-gradient() ฟังก์ชันจะตั้งค่าฝากแนวกระเบิดเป็นภาพหลังของโปรแกรม

ฝากแนวกระเบิดเป็นการเปลี่ยนแปลงสีที่หมุนรอบจุดกลาง (เหมือนแผนภาพเครื่องกลมและวงแหวนสี)

เพื่อสร้างฝากแนวกระเบิด ต้องเฉพาะการกำหนดจุดหยุดสีอย่างน้อยสองสี。

ตัวอย่างฝากแนวกระเบิด:

ตัวอย่าง

ตัวอย่าง 1

ฝากแนวกระเบิดสีสามสี:

#grad {
  background-image: conic-gradient(สีแดง, สีเหลือง, สีเขียว);
}

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

ตัวอย่าง 2

ฝากแนวกระเบิดสีห้าสี:

#grad {
  background-image: conic-gradient(ฝากแนวกระเบิดสีแดง, สีเหลือง, สีเขียว, สีสีน้ำเงิน, สีดำ);
}

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

ตัวอย่าง 3

ฝากแนวกระเบิดสีสามสี และกำหนดมุมแก่แต่ละสี:

#grad {
  background-image: conic-gradient(สีแดง 45deg, สีเหลือง 90deg, สีเขียว 210deg)
}

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

ตัวอย่าง 4

ด้วยการเพิ่ม border-radius: 50% ทำให้ฝากแนวกระเบิดดูเหมือนแผนภาพเครื่องกลม:

#grad {
  background-image: conic-gradient(ฝากแนวกระเบิดสีแดง, สีเหลือง, สีเขียว, สีสีน้ำเงิน, สีดำ);
  border-radius: 50%;
}

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

ตัวอย่างที่ 5

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

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

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

ตัวอย่างที่ 6

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

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

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

ตัวอย่างที่ 7

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

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

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

ตัวอย่างที่ 8

ตัวอย่างกราฟที่แบ่งกลุ่ม:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

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

CSS ภาษา

background-image: conic-gradient([from angle] position,] color degree, color degree, ... );

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

การสนับสนุนโปรแกรมบราวเซอร์

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

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

คู่มือ:gradient ของ CSS

อ้างอิง：คุณสมบัติ background-image CSS

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

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

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

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

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