什么是径向渐变

##### 2 径向渐变 radial-gradient

径向渐变 ： 一个点到四周的渐变

- 语法

```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, ...);

```

```css

div {

width: 300px;

height: 300px;

margin: 20px;

}

/* 椭圆（ellipse,默认值） */

.box1 {

background: -webkit-radial-gradient(ellipse, red, yellow, green);

background: -moz-radial-gradient(ellipse, red, yellow, green);

background: -o-radial-gradient(ellipse, red, yellow, green);

background: -ms-radial-gradient(ellipse, red, yellow, green);

background: radial-gradient(ellipse, red, yellow, green);

}

/* 圆形（circle） */

.box2 {

background: -webkit-radial-gradient(circle, red, yellow, green);

background: -moz-radial-gradient(circle, red, yellow, green);

background: -o-radial-gradient(circle, red, yellow, green);

background: -ms-radial-gradient(circle, red, yellow, green);

background: radial-gradient(circle, red, yellow, green);

}

/* 圆心位置 px（表示距左上角的0，0的坐标位置）*/

.box3 {

background: -webkit-radial-gradient(circle at 50px 100px, red, yellow, green);

background: -moz-radial-gradient(circle at 50px 100px, red, yellow, green);

background: -o-radial-gradient(circle at 50px 100px, red, yellow, green);

background: -ms-radial-gradient(circle at 50px 100px, red, yellow, green);

background: radial-gradient(circle at 50px 100px, red, yellow, green);

}

/* 百分比 表示圆心在右侧中心 */

.box3 {

background: -webkit-radial-gradient(circle at 100% 50%, red, yellow, green);

background: -moz-radial-gradient(circle at 100% 50%, red, yellow, green);

background: -o-radial-gradient(circle at 100% 50%, red, yellow, green);

background: -ms-radial-gradient(circle at 100% 50%, red, yellow, green);

background: radial-gradient(circle at 100% 50%, red, yellow, green);

}

/* 关键词 表示圆心在左上角 */

.box4 {

background: -webkit-radial-gradient(circle at left top, red, yellow, green);

background: -moz-radial-gradient(circle at left top, red, yellow, green);

background: -o-radial-gradient(circle at left top, red, yellow, green);

background: -ms-radial-gradient(circle at left top, red, yellow, green);

background: radial-gradient(circle at left top, red, yellow, green);

}

/* 重复径向渐变 */

.box5 {

background: -webkit-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);

background: -moz-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);

background: -o-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);

background: -ms-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);

background: repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);

}

/* 重复径向渐变 */

.box6 {

background: -webkit-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);

background: -moz-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);

background: -o-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);

background: -ms-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);

background: repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);

}

```