การไล่ระดับสีแบบกรวยคือการไล่ระดับสีที่มีการเปลี่ยนสีที่หมุนรอบจุดศูนย์กลาง
หากต้องการสร้างการไล่ระดับสีแบบกรวย คุณต้องกำหนดสีอย่างน้อยสองสี
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);ตามค่าเริ่มต้น มุม จะเป็น 0 องศา และ ตำแหน่ง เป็นศูนย์กลาง
หากไม่มีการระบุ องศา สีจะกระจายไปเท่าๆ กัน จุดศูนย์กลาง
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีแบบกรวยที่มีสามสี:
การไล่ระดับสีแบบกรวยที่มีสามสี:
#grad {
background-image: conic-gradient(red, yellow, green);
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Conic Gradient - Three Colors</h1>
<div id="grad1"></div>
</body>
</html>
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีแบบกรวยที่มีห้าสี:
การไล่ระดับสีแบบกรวยที่มีห้าสี:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>
<h1>Conic Gradient - Five Colors</h1>
<div id="grad1"></div>
</body>
</html>
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีแบบกรวยซึ่งมีสามสีและระดับสำหรับแต่ละสี:
การไล่ระดับสีแบบกรวยที่มีสามสีและระดับสำหรับแต่ละสี:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>
<h1>Conic Gradient - Defined degree for each color</h1>
<div id="grad1"></div>
</body>
</html>
เพียงเพิ่ม border-radius: 50% เพื่อทำให้การไล่ระดับสีรูปกรวยดูเหมือนพาย:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Conic Gradient - Pie Chart</h1>
<div id="grad1"></div>
</body>
</html>
นี่คือแผนภูมิวงกลมอีกแผนภูมิหนึ่งที่มีองศาที่กำหนดไว้สำหรับสีทั้งหมด:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Conic Gradient - Pie Chart</h1>
<div id="grad1"></div>
</body>
</html>
[จาก มุม] ระบุมุมของการไล่ระดับสีทรงกรวยทั้งหมด หมุนโดย
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีทรงกรวยด้วยมุมจากมุม 90 องศา:
การไล่ระดับสีทรงกรวยด้วยมุมจาก:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Conic Gradient - With a from angle</h1>
<div id="grad1"></div>
</body>
</html>
[at ตำแหน่ง] ระบุจุดศูนย์กลางของการไล่ระดับสีทรงกรวย
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีทรงกรวยโดยมีตำแหน่งกึ่งกลาง 60% 45%:
การไล่ระดับสีทรงกรวยที่มีตำแหน่งกึ่งกลางที่ระบุ:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Conic Gradient - With a specified center position</h1>
<div id="grad1"></div>
</body>
</html>
ฟังก์ชัน repeating-conic-gradient() ใช้ในการทำซ้ำการไล่ระดับสีทรงกรวย:
การไล่ระดับสีแบบกรวยซ้ำ:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Repeating a Conic Gradient</h1>
<div id="grad1"></div>
</body>
</html>
นี่คือการไล่ระดับสีแบบกรวยซ้ำซึ่งมีการกำหนดสีเริ่มต้นและหยุดสี:
การไล่ระดับสีแบบกรวยซ้ำโดยกำหนดสีเริ่มต้นและสีหยุด:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Repeating a Conic Gradient with color-starts and -stops</h1>
<div id="grad1"></div>
</body>
</html>
ตารางต่อไปนี้แสดงรายการฟังก์ชันการไล่ระดับสี CSS:
สร้างการไล่ระดับสีแบบกรวย กำหนดอย่างน้อยสอง สี (รอบจุดศูนย์กลาง)
สร้างการไล่ระดับสีเชิงเส้น กำหนดอย่างน้อยสอง สี (บนลงล่าง)
สร้างการไล่ระดับสีแบบรัศมี กำหนดอย่างน้อยสอง สี (กึ่งกลางถึงขอบ)
ทำซ้ำการไล่ระดับสีทรงกรวย
ทำซ้ำการไล่ระดับสีเชิงเส้น
ทำซ้ำการไล่ระดับสีในแนวรัศมี