CSS Conic Gradients
CSS Conic Gradients
การไล่ระดับสีรูปกรวยเป็นการไล่ระดับสีที่มีการเปลี่ยนสีโดยหมุนรอบจุดศูนย์กลาง
ในการสร้างการไล่ระดับสีรูปกรวย คุณต้องกำหนดสีอย่างน้อยสองสี
ไวยากรณ์
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
โดยค่าเริ่มต้นมุมคือ 0 องศาและตำแหน่งอยู่ตรงกลาง
หากไม่ ระบุ องศาสีจะกระจายทั่วจุดศูนย์กลางเท่าๆ กัน
Conic Gradient: สามสี
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีรูปกรวยที่มีสามสี:
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีสามสี:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Conic Gradient: ห้าสี
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีรูปกรวยที่มีห้าสี:
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีห้าสี:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Conic Gradient: สามสีและองศา
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีรูปกรวยที่มีสามสีและระดับสำหรับแต่ละสี:
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีสามสีและระดับสำหรับแต่ละสี:
#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%;
}
นี่คือแผนภูมิวงกลมอีกอันที่มีองศาที่กำหนดไว้สำหรับสีทั้งหมด:
ตัวอย่าง
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Conic Gradient พร้อมระบุจากมุม
[จากมุม ] ระบุมุมที่จะหมุนเกรเดียนท์รูปกรวยทั้งหมด
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีรูปกรวยที่มีมุมจาก 90 องศา:
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มี a จากมุม:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Conic Gradient พร้อมตำแหน่งกึ่งกลางที่ระบุ
[ที่ตำแหน่ง ] ระบุจุดศูนย์กลางของการไล่ระดับสีรูปกรวย
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีรูปกรวยที่มีตำแหน่งกึ่งกลาง 60% 45%:
ตัวอย่าง
การไล่ระดับสีรูปกรวยที่มีตำแหน่งกึ่งกลางที่ระบุ:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
ทำซ้ำ Conic Gradient
ฟังก์ชันrepeating-conic-gradient()นี้ใช้เพื่อทำซ้ำการไล่ระดับสีรูปกรวย:
ตัวอย่าง
การไล่ระดับรูปกรวยซ้ำ:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
นี่คือการไล่ระดับรูปทรงกรวยซ้ำๆ พร้อมการเริ่มสีและการหยุดสีที่กำหนดไว้:
ตัวอย่าง
การไล่ระดับรูปกรวยซ้ำๆ พร้อมกำหนดสีเริ่มต้นและหยุดสี:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
ฟังก์ชันการไล่ระดับสี CSS
ตารางต่อไปนี้แสดงรายการฟังก์ชันการไล่ระดับสี CSS:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |