CSS3的radial-gradient(径向渐变)

时间:2021-07-19 16:42:22

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

CSS3的radial-gradient(径向渐变)

语法:

radial-gradient(
  [
    [渐变大小]?
    [ at 渐变圆心坐标]?
  ,]?
  颜色[ 开始位置]
  [,颜色[ 开始位置]]+
);

例1:

.ball{
width:200px;height:200px;
background:-webkit-radial-gradient(#CC3,#3F9,#06C);
}

效果如图下:

CSS3的radial-gradient(径向渐变)

例2:

CSS3的radial-gradient(径向渐变)

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