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

posted @ 2017-01-16 14:56  realDanielWu  阅读(363)  评论(0编辑  收藏  举报