css background gradient（下）

我们上期说的是线性渐变 linear-gradient
我们再来说说径向渐变 radial-gradient(shape size at position, color ...)

1. 浅浅试用一下
   shape 圆 / 椭圆
   size 渐变的半径
   position 圆心的位置
   当然 color后面也可以加位置信息 px和%都接受 如果位置信息冲突的话 同样 渐变也会消失

height: 200px;
width: 200px;
background-image: radial-gradient(circle, red, green, yellow);

径向渐变

2. 改变圆心的位置

height: 200px;
width: 200px;
background-image: radial-gradient(circle at , red 20px, green 20%);

改变圆心

3. 当红色变为透明

height: 200px;
width: 200px;
background-image: radial-gradient(circle at , transparent 20px, green 0);

缺一个角

4. 改变下background-size试试

height: 200px;
width: 200px;
background-image: radial-gradient(circle at , transparent 20px, green 0);
background-size: 50% 50%;

缩小size

5. 当我们设置不允许重复时，就只剩左上角了
6. 然后对左上角的处理一下 再叠加使用

height: 200px;
width: 200px;
background-image: radial-gradient(circle at bottom left, transparent 20px, green 0), 
                  radial-gradient(circle at bottom right, transparent 20px, red 0)
                  radial-gradient(circle at top left, transparent 20px, blue 0)
                  radial-gradient(circle at top right, transparent 20px, orange 0);
background-size: 50% 50%;

小伙伴们可以自己试试这个效果

总结： 当我看到这个需求的时候，第一个想法是图片，可是这个内容不确定，web的图片不能自定义拉伸，肯定会有所变形，结果看到了这个神奇的css。只能说 css yyds。