【前端】CSS 背景颜色渐变

通过使用 CSS3 线性渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡，由于用到CSS3所以需要考虑下浏览器兼容问题，例如：
从左到右的线性渐变，且带有透明度的样式：

background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

标准语法：linear-gradient(direction, color1, color2, …)

• Safari浏览器： -webkit-linear-gradient
• Opera浏览器： -o-linear-gradient
• Firefox浏览器： -moz-linear-gradient

direction：

• 从上到下（默认情况下）
• 从左到右：to right
• 对角：to bottom right

color：

rgba()中的4个数字，前3个为颜色rgb，最后1个是透明度，取值0-1，0为透明,1为不透明

参考

• https://www.runoob.com/css3/css3-gradients.html