CSS3 渐变(Gradients)
CSS3渐变功能使您可以创建从一种颜色到另一种颜色的渐变，而无需使用任何图像。
使用CSS3渐变
CSS3渐变功能提供了一种灵活的解决方案，可以在两种或多种颜色之间生成平滑的过渡。为了达到这种效果，我们不得不使用图像。使用CSS3渐变可以减少下载时间并节省带宽使用量。可以将渐变元素按比例放大或缩小到任何程度，而不会降低质量，并且输出将更快地渲染，因为它是由浏览器生成的。
渐变有两种样式：线性 (linear)和径向(radial)。
创建CSS3 线性渐变(linear)
要创建线性渐变，您必须至少定义两个色标。但是，要创建更复杂的渐变效果，您可以定义更多的色标。色标是您要呈现平滑过渡的颜色。您还可以设置应用渐变效果的起点和方向（或角度）。使用关键字创建线性渐变的基本语法可以通过以下方式给出：
linear-gradient(angle, color-stop1, color-stop2, ...)
线性渐变-从上到下
以下示例将创建一个从上到下的线性渐变。这是默认值。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}测试看看‹/›线性渐变-从左到右
以下示例将创建一个从左到右的线性渐变。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(left, red, yellow);
background: linear-gradient(to right, red, yellow);
}测试看看‹/›线性渐变-对角线
您还可以沿对角线方向创建渐变。以下示例将创建一个从元素框的左下角到右上角的线性渐变。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(bottom left, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(bottom left, red, yellow);
background: linear-gradient(to top right, red, yellow);
}测试看看‹/›使用角度设置线性渐变的方向
如果要进一步指定渐变的方向，可以设置角度，而不是预定义的关键字。该角度0deg创建了从底部到顶部的渐变，正角度表示顺时针旋转，这意味着该角度90deg创建了从左到右的渐变。使用角度创建线性渐变的基本语法可以给出：
linear-gradient(angle, color-stop1, color-stop2, ...)
以下示例将使用角度从左到右创建线性渐变。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(0deg, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(0deg, red, yellow);
background: linear-gradient(90deg, red, yellow);
}测试看看‹/›使用多个色标创建线性渐变
您还可以为两种以上的颜色创建渐变。以下示例将向您展示如何使用多个色标创建线性渐变。所有颜色均等分布。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow, lime);
background: linear-gradient(red, yellow, lime);
}测试看看‹/›设置位置色标
色标是沿着渐变线的点，在该位置将具有特定颜色。色标的位置可以指定为百分比或绝对长度。您可以根据需要指定任意多个色标，以达到所需的效果。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
/* For 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 {
/* Fallback for browsers that don't support gradients */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
/* For Internet Explorer 10 */
background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
background: repeating-linear-gradient(black, white 10%, lime 20%);
}测试看看‹/›创建CSS3径向渐变(radial)
在径向渐变中，颜色从单个点出现，并以圆形或椭圆形形状向外平滑散布，而不是像线性渐变那样从一种颜色在单个方向上渐变为另一种颜色。创建径向渐变的基本语法可以通过以下方式给出：
radial-gradient(shape size at position, color-stop1, color-stop2, ...);
该radial-gradient()函数的参数具有以下含义：
position —指定渐变的起点，可以以单位（px，em或百分比）或关键字（left，bottom等）指定渐变的起点。
shape —指定渐变的最终形状的形状。它可以是圆形或椭圆形。
size —指定渐变的最终形状的大小。默认值为farthest-side。
以下示例将显示您创建带有均匀间隔的色标的径向渐变。
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(red, yellow, lime);
background: radial-gradient(red, yellow, lime);
}测试看看‹/›设置径向渐变的形状
radial-gradient()函数的shape参数用于定义径向渐变的最终形状。它可以取值 circle 或 ellipse。这是一个实例：
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(circle, red, yellow, lime);
/* For 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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
/* For 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 {
/* Fallback for browsers that don't support gradients */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
/* For 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 {
/* Fallback for browsers that don't support gradients */
background: url("images/sky.jpg");
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
/* For 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");
}测试看看‹/›