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");
}
测试看看‹/›