本日先说一下CSS渐变背景色的实现,产品小姐姐哀求按钮的颜色是绚丽的渐变色,以是我也去查了一下实现。

用到的属性自然还是background,语法是background: linear-gradient(direction, color-stop1, color-stop2, ...);

这个属性可以实现从上到下,从左到右,左上角到右下角,乃至自定义渐变角度的渐变方向。
我们常用的便是从上到下和从左到右渐变。

html背景颜色渐变一分钟前端|CSS实现配景色渐变 Ruby

从上到下渐变:

#grad {

background: -webkit-linear-gradient(red, blue); / Safari 5.1 - 6.0 /

background: -o-linear-gradient(red, blue); / Opera 11.1 - 12.0 /

background: -moz-linear-gradient(red, blue); / Firefox 3.6 - 15 /

background: linear-gradient(red, blue); / 标准的语法 /

}

从左到右渐变:

#grad {

background: -webkit-linear-gradient(left, red , blue); / Safari 5.1 - 6.0 /

background: -o-linear-gradient(right, red, blue); / Opera 11.1 - 12.0 /

background: -moz-linear-gradient(right, red, blue); / Firefox 3.6 - 15 /

background: linear-gradient(to right, red , blue); / 标准的语法 /

}

关于CSS渐变色就和大家先容到这里,你GET到了吗?欢迎点赞,评论,转发。