扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
如何在css3中实现背景颜色渐变？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联公司主营吕梁网站建设的网络公司,主营网站建设方案,app软件开发公司,吕梁h5成都微信小程序搭建,吕梁网站营销推广欢迎吕梁等地区企业咨询
一、css3线性渐变设置的背景颜色渐变
首先我们要知道css3线性渐变所用的属性是linear-gradient。
语法：linear-gradient(to bottom,colorStrat,colorEnd)
参数含义：
第一个参数指定 渐变的方向
to bottom 从上至下；to bottom right 从左上至右下；to right 从左至右；to up right 从左下至右上；
to up 从下至下；to up left 从右下至左上；to left 从右至左；to bottom left 从右上至左下
第二个参数 指定渐变色的开始颜色
第三个参数 指定渐变色的结束颜色
实例：
创新互联 线性渐变 - 从上到下
css3背景颜色渐变效果如下：
二、css3径向渐变设置的背景颜色渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
css3径向渐变用到的属性是radial-gradient。
语法：background: radial-gradient(shape size at position, start-color, ..., last-color);
实例：
创新互联 径向渐变
css3背景颜色渐变效果如下：
看完上述内容，你们掌握如何在css3中实现背景颜色渐变的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网