径向渐变 : 一个点到四周的渐变
- 语法
```html
backgrond: radial-gradient(渐变形状, 颜色1 范围1, 颜色2 范围2, ...);
渐变形状:椭圆(ellipse,默认值)、圆形(circle)
圆心位置
语法:background:radial-gradient(形状 at 水平位置 垂直位置,颜色1,颜色2)
取值:
- px(表示距左上角的0,0的坐标位置)
- 关键字可以是以下词的组合
- left center right
- top center bottom
- 百分比
例:表示圆心在右侧中心
background: radial-gradient(circle at 100% 50%, red, yellow, green);
```
例:表示圆心在左上角
background: radial-gradient(circle at left top, red, yellow, green);
```
- 重复径向渐变
```html
backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);
```