CSS Radial Gradients
CSS Radial Gradients
การไล่ระดับสีในแนวรัศมีถูกกำหนดโดยจุดศูนย์กลาง
ในการสร้างการไล่ระดับสีในแนวรัศมี คุณต้องกำหนดสต็อปสีอย่างน้อยสองสต็อปด้วย
ไวยากรณ์
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
ตามค่าเริ่มต้น รูปร่างจะเป็นวงรี ขนาดคือมุมที่ไกลที่สุด และตำแหน่งอยู่ตรงกลาง
Radial Gradient - การเว้นระยะสีเท่าๆ กัน (นี่เป็นค่าเริ่มต้น)
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีในแนวรัศมีโดยมีการหยุดสีที่เว้นระยะห่างเท่าๆ กัน:
ตัวอย่าง
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radial Gradient - การเว้นระยะสีที่ต่างกัน
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีในแนวรัศมีที่มีการหยุดสีที่เว้นระยะต่างกัน:
ตัวอย่าง
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
กำหนดรูปร่าง
พารามิเตอร์รูปร่างกำหนดรูปร่าง สามารถนำค่าวงกลมหรือวงรี ค่าเริ่มต้นคือวงรี
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีในแนวรัศมีที่มีรูปร่างเป็นวงกลม:
ตัวอย่าง
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
การใช้คำสำคัญที่มีขนาดต่างกัน
พารามิเตอร์ size กำหนดขนาดของการไล่ระดับสี สามารถรับได้สี่ค่า:
- ด้านที่ใกล้เคียงที่สุด
- ด้านที่ไกลที่สุด
- มุมที่ใกล้ที่สุด
- มุมที่ไกลที่สุด
ตัวอย่าง
การไล่ระดับสีแบบรัศมีพร้อมคำหลักที่มีขนาดต่างกัน:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
ทำซ้ำการไล่ระดับแนวรัศมี
ฟังก์ชัน repeating-radial-gradient() ใช้เพื่อทำซ้ำการไล่ระดับสีในแนวรัศมี:
ตัวอย่าง
การไล่ระดับสีแบบเรเดียลซ้ำ:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}