渐变css样式（2）

2）径向渐变 radial-gradient

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

语法：

backgrond: radial-gradient(渐变形状, 颜色1 范围1, 颜色2 范围2, ...);
    渐变形状：椭圆（ellipse,默认值）、圆形（circle）
 
圆心位置
语法：background:radial-gradient(形状 at 水平位置 垂直位置,颜色1，颜色2)
如果只给一个值，另一个值（y垂直方向）默认center

取值：
- 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);

重复径向渐变

backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);

 div {
        width: 400px;
        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);
    }   
    /* 圆形（circle） 颜色，范围 */
       .box7 {
            background: radial-gradient(circle, red 10%, yellow 20%, green 30%);
        }

    /* 圆心位置 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);
    }



    /* 重复径向渐变 */
    div {
        width: 500px;
        height: 200px;
        border: 1px solid tomato;
        margin: 30px;
    }


    .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%);
    }

    div:nth-child(4) {
        background: repeating-radial-gradient(ellipse at right center, red 10%, orange 20%, yellow 30%, green 40%, aqua 50%, blue 60%, purple 70%);
    }

    div:nth-child(5) {
        background: repeating-radial-gradient(ellipse at left center, red 10%, orange 20%, yellow 30%, green 40%, aqua 50%, blue 60%, purple 70%);

                                                                                                                @ 南乔笔记