CSS3 渐变
CSS3 渐变功能允许您在不使用任何图像的情况下创建从一种颜色到另一种颜色的渐变。
使用 CSS3 渐变
CSS3 渐变功能提供了一种灵活的解决方案，可以在两种或多种颜色之间生成平滑过渡。 早些时候，为了达到这样的效果，我们不得不使用图像。 使用 CSS3 渐变可以减少下载时间并节省带宽使用。 带有渐变的元素可以在不损失质量的情况下任意放大或缩小，而且输出将渲染得更快，因为它是由浏览器生成的。
渐变有两种样式：线性渐变 和 径向渐变。
创建 CSS3 线性渐变
要创建线性渐变，您必须定义至少两个色标。 但是，要创建更复杂的渐变效果，您可以定义更多色标。 色标是您想要在其中呈现平滑过渡的颜色。 您还可以设置应用渐变效果的起点和方向（或角度）。 使用关键字创建线性渐变的基本语法可以通过以下方式给出：
线性渐变 - 从上到下
下面的示例将创建一个从上到下的线性渐变。 这是默认设置。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-linear-gradient(red, yellow);
/* 对于 Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow);
/* 标准语法 */
background: linear-gradient(red, yellow);
}线性渐变 - 从左到右
以下示例将创建从左到右的线性渐变。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-linear-gradient(left, red, yellow);
/* 对于 Internet Explorer 10 */
background: -ms-linear-gradient(left, red, yellow);
/* 标准语法 */
background: linear-gradient(to right, red, yellow);
}线性渐变 - 对角线
您还可以沿对角线方向创建渐变。 下面的示例将创建一个从元素框的左下角到右上角的线性渐变。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-linear-gradient(bottom left, red, yellow);
/* 对于 Internet Explorer 10 */
background: -ms-linear-gradient(bottom left, red, yellow);
/* 标准语法 */
background: linear-gradient(to top right, red, yellow);
}使用角度设置线性渐变的方向
如果您想更好地控制渐变的方向，可以设置角度，而不是预定义的关键字。 角度 0deg 创建从下到上的渐变，正角度表示顺时针旋转，这意味着角度 90deg 创建从左到右的渐变。 使用角度创建线性渐变的基本语法可以通过以下方式给出：
以下示例将使用角度创建从左到右的线性渐变。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-linear-gradient(0deg, red, yellow);
/* 对于 Internet Explorer 10 */
background: -ms-linear-gradient(0deg, red, yellow);
/* 标准语法 */
background: linear-gradient(90deg, red, yellow);
}使用多个色标创建线性渐变
您还可以为两种以上的颜色创建渐变。 以下示例将向您展示如何使用多个色标创建线性渐变。 所有颜色间隔均匀。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-linear-gradient(red, yellow, lime);
/* 对于 Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow, lime);
/* 标准语法 */
background: linear-gradient(red, yellow, lime);
}设置位置色标
色标是沿渐变线的点，在该位置将具有特定颜色。 色标的位置可以指定为百分比，也可以指定为绝对长度。 您可以指定任意数量的色标来达到所需的效果。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
/* 对于 Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow 30%, lime 60%);
/* 标准语法 */
background: linear-gradient(red, yellow 30%, lime 60%);
}注意：设置色标位置为百分比时，0%代表起点，100%代表终点。 但是，您可以使用该范围之外的值，即 0% 之前或 100% 之后的值来获得您想要的效果。
重复线性渐变
您可以使用 repeating-linear-gradient() 函数重复线性渐变。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: white;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
/* 对于 Internet Explorer 10 */
background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
/* 标准语法 */
background: repeating-linear-gradient(black, white 10%, lime 20%);
}创建 CSS3 径向渐变
在径向渐变中，颜色从一个点出现并以圆形或椭圆形平滑地向外扩散，而不是像线性渐变那样在单个方向上从一种颜色渐变到另一种颜色。 创建径向渐变的基本语法可以通过以下方式给出：
radial-gradient() 函数的参数含义如下：
- position — 指定渐变的起点，可以以单位（px、em 或百分比）或关键字（left、bottom 等）指定。
- shape — 指定渐变结束形状的形状。 它可以是圆形或椭圆形。
- size — 指定渐变结束形状的大小。 默认值为
farthest-side。
以下示例将向您展示如何创建具有均匀间隔色标的径向渐变。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-radial-gradient(red, yellow, lime);
/* 对于 Internet Explorer 10 */
background: -ms-radial-gradient(red, yellow, lime);
/* 标准语法 */
background: radial-gradient(red, yellow, lime);
}设置径向渐变的形状
radial-gradient() 函数的 shape 参数用于定义径向渐变的结束形状。 它可以取值 circle 或 ellipse。 这是一个例子：
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-radial-gradient(circle, red, yellow, lime);
/* 对于 Internet Explorer 10 */
background: -ms-radial-gradient(circle, red, yellow, lime);
/* 标准语法 */
background: radial-gradient(circle, red, yellow, lime);
}注意： 如果省略或未指定 shape 参数，则结束形状默认为圆形（如果大小为单一长度），否则为椭圆。
设置径向渐变的大小
radial-gradient() 函数的 size 参数用于定义渐变结束形状的大小。 可以使用单位或关键字设置大小：closest-side, farthest-side, closest-corner, farthest-corner。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: red;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
/* 对于 Internet Explorer 10 */
background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
/* 标准语法 */
background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}重复径向渐变
您还可以使用 repeating-radial-gradient() 函数重复径向渐变。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: white;
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
/* 对于 Internet Explorer 10 */
background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
/* 标准语法 */
background: repeating-radial-gradient(black, white 10%, lime 20%);
}CSS3 透明度和渐变
CSS3 渐变也支持透明度。 堆叠 多个背景 时，您可以使用它在背景图像上创建渐变效果。
.gradient {
/* 不支持渐变的浏览器的后备方案 */
background: url("images/sky.jpg");
/* 适用于 Safari 5.1 至 6.0 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
/* 对于 Internet Explorer 10 */
background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
/* 标准语法 */
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}