我们上期说的是线性渐变 linear-gradient
我们再来说说径向渐变 radial-gradient(shape size at position, color ...)
- 浅浅试用一下
shape 圆 / 椭圆
size 渐变的半径
position 圆心的位置
当然 color后面也可以加位置信息 px和%都接受 如果位置信息冲突的话 同样 渐变也会消失
height: 200px;
width: 200px;
background-image: radial-gradient(circle, red, green, yellow);
径向渐变
- 改变圆心的位置
height: 200px;
width: 200px;
background-image: radial-gradient(circle at , red 20px, green 20%);
改变圆心
- 当红色变为透明
height: 200px;
width: 200px;
background-image: radial-gradient(circle at , transparent 20px, green 0);
缺一个角
- 改变下background-size试试
height: 200px;
width: 200px;
background-image: radial-gradient(circle at , transparent 20px, green 0);
background-size: 50% 50%;
缩小size
- 当我们设置不允许重复时，就只剩左上角了
- 然后对左上角的处理一下 再叠加使用
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。
