当前位置：首页 > 资讯 > 网页前端 > CSS

一分钟前台｜CSS实现背景色渐变

时间：2018-10-04 23:17 作者：前端科技来源：前端科技阅读：210
扫一扫，手机访问

摘要：最近写了很多H5页面，在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点，一分钟学会一个前台技能点。想想也很超值，反正哪里都是堵车，学点东西也是挺好的。今天先说一下CSS渐变背景色的实现，产品小姐姐要求按钮的颜色是绚丽的渐变色，所以我也去查了一下实现。用到的属性自然还是b

最近写了很多H5页面，在完成产品经理要求的过程中遇到了很多问题。国庆假期想着梳理一下最近用到的知识点，一分钟学会一个前台技能点。想想也很超值，反正哪里都是堵车，学点东西也是挺好的。

今天先说一下CSS渐变背景色的实现，产品小姐姐要求按钮的颜色是绚丽的渐变色，所以我也去查了一下实现。

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

这个属性可以实现从上到下，从左到右，左上角到右下角，甚至自己设置渐变角度的渐变方向。我们常用的就是从上到下和从左到右渐变。

从上到下渐变：

#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到了吗？欢迎点赞，评论，转发。