CSS conic-gradient()ฟังก์ชั่น
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีสามสี:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ฟังก์ชัน conic-gradient() ตั้งค่าการไล่ระดับสีรูปกรวยเป็นภาพพื้นหลัง
การไล่ระดับสีรูปกรวยเป็นการไล่ระดับสีที่มีการเปลี่ยนสีโดยหมุนรอบจุดศูนย์กลาง
ในการสร้างการไล่ระดับสีแบบกรวย คุณต้องกำหนดสต็อปสีอย่างน้อยสองสต็อป
ตัวอย่าง Conic Gradient:
รุ่น: | CSS3 |
---|
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับฟังก์ชันนี้อย่างเต็มที่
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
ไวยากรณ์ CSS
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Value | Description |
---|---|
from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีห้าสี:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีสามสีและระดับสำหรับแต่ละสี:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
ตัวอย่าง
ทำให้การไล่ระดับสีรูปกรวยดูเหมือนวงกลมโดยเพิ่ม border-radius: 50%:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มี a จากมุม:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
ตัวอย่าง
เกรเดียนต์รูปกรวยที่มีตำแหน่ง at:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีทั้งจากมุมและที่ตำแหน่ง:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
ตัวอย่าง
แผนภูมิวงกลมอื่น:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS การไล่ระดับสี