900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS3的radial-gradient(径向渐变)

CSS3的radial-gradient(径向渐变)

时间:2020-11-27 13:45:33

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。