渐变(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");
}