CSS3的radialgradient(径向渐变)

所谓径向渐变,如图下,类似光晕

语法:

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的前端之路有你相伴,咱们下期再见!
原文地址:https://www.cnblogs.com/realdanielwu/p/6289670.html