css3径向渐变

径向渐变

1.基本语法

从中心向周围发散渐变，只有两种形状——椭圆（默认）和圆

    <style>
        #test{
            width: 300px;
            height: 350px;
            margin: 150px auto;
            //默认椭圆
            background: radial-gradient(blue,yellow);
        }
    </style>

<div id="test"></div>

效果图：

2.调整发散位置（默认中心）

中心就是at center center
相当于at x y坐标，当然也可以是百分比（%）
x、y的参考坐标是左上角（0，0）

background: radial-gradient(at 20% 20%,blue,yellow);

效果图：

3.大小

最近边：closest-side
最远边：farthest-side
最近角：closest-corner
最远角：farthest-corner

background: radial-gradient(closest-side circle at 20% 20%,blue,yellow);

效果图：