CSS-背景颜色渐变属性

前言

主要是CSS3中的渐变（gradients）可以让你在两个或多个指定的颜色之间实现显示平稳的过渡。

以下简单记录以下几种方式

1.线性渐变

必须至少定义两种颜色节点。颜色节点即想要呈现平稳过渡的颜色。

线性渐变，从上到下

从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#e66465, #9198e5);

2.线性渐变，从左到右

从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to right, red , yellow);

3.线性渐变，对角
从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);

ps：小程序显示若代码显示异常请点击原文地址进行浏览器查看