CSS3的radial-gradient(径向渐变)
所谓径向渐变,如图下,类似光晕
语法:
radial-gradient(
[
[渐变大小]?
[ at 渐变圆心坐标]?
,]?
颜色[ 开始位置]
[,颜色[ 开始位置]]+
);
例1:
.ball{ width:200px;height:200px; background:-webkit-radial-gradient(#CC3,#3F9,#06C); }
效果如图下:
例2:
div{ width:200px;height:200px; margin:10px; } .first{ background:-webkit-radial-gradient(#CC3,#3F9 40%,#06C); } .second{ background:-webkit-radial-gradient(35px 35px,#CC3,#3F9 40%,#06C); } .third{ background:-webkit-radial-gradient(0px 0px,#CC3,#3F9 40%,#06C); }
此外,需要增加颜色可直接在后面怼,至于颜色后面的百分可以用来控制色域范围~
这期就到这,我是Daniel
欢乐的时光如此短暂,好了,今天就到这里了,觉得不错麻烦点个赞,danielwu的前端之路有你相伴,咱们下期再见!