径向渐变
基本语法
radial-gradient([形状] [尺寸] at [位置], 颜色节点1 [位置], 颜色节点2 [位置], ...)
常用参数
| 参数类型 | 示例 | 说明 |
|---|---|---|
| 形状 | circle、ellipse | 圆形,椭圆形 |
| 尺寸 | closest-side、farthest-side、closest-corner、farthest-corner | 控制渐变范围 |
| 位置 | at center、at top left、at 30% 70% | 控制圆心位置 |
默认:
ellipse at center
形状控制
1. 圆形渐变(circle)
2. 椭圆渐变(ellipse)
尺寸模式
1. closest-side
圆一直扩展到最近的边
2. farthest-corner
扩展到最远的角(最常用)
重复的径向渐变
repeating-radial-gradient(形状 at 位置, 色1 位置, 色2 位置)
复杂图形
波点(Polka Dots)
两层错位波点