css3渐变gradient – CSS3高级教程

上一章CSS3高级教程请查看：css3背景background

CSS3的渐变功能允许你在不使用任何图像的情况下创建从一种颜色到另一种颜色的渐变。

使用CSS3渐变

CSS3的渐变特性提供了一个灵活的解决方案来生成两个或多个颜色之间的平滑过渡。早些时候，为了达到这样的效果，我们不得不使用图像。使用CSS3的渐变可以减少下载时间和节省带宽使用。带有渐变的元素可以按比例放大或缩小到任何程度而不会失去质量，而且由于它是由浏览器生成的，所以输出也会渲染得快得多。

渐变有两种样式：线性和径向。

创建CSS3线性渐变

要创建一个线性渐变，你必须定义至少两个颜色停止。然而，创建更复杂的渐变效果，你可以定义更多的颜色停止。颜色停止是你想要渲染平滑过渡的颜色。你也可以设置一个起始点和一个方向(或角度)，沿着这个方向应用渐变效果。使用关键字创建线性渐变的基本语法如下：

linear-gradient(direction, color-stop1, color-stop2, ...)

线性渐变-从上到下

下面的例子将创建一个从上到下的线性渐变，这是默认的。

.gradient {
    /* 不支持渐变的浏览器的备份 */
    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 {
    /* 备份 */
    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 {
    /* 备份 */
    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);
}

使用角度设置线性渐变方向

如果你想对渐变的方向有更多的控制，你可以设置角度，而不是预定义的关键字。0度角创建了一个从下到上的渐变，正角代表顺时针旋转，这意味着90度角创建了一个从左到右的渐变。使用角度创建线性渐变的基本语法如下：

linear-gradient(angle, color-stop1, color-stop2, ...)

下面的示例将使用角度创建从左到右的线性渐变。

.gradient {
    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 {
    /* 备份 */
    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 {
    /* 备份 */
    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 {
    /* 备份 */
    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-gradient(shape size at position, color-stop1, color-stop2, ...);

径向渐变()函数的自变量有如下含义：

• position—指定渐变的起始点，可以用单位(px、em或百分比)或关键字(左、底等)来指定。
• shape -指定渐变结束形状的形状。它可以是圆的，也可以是椭圆的。
• size -指定渐变结束形状的大小，默认是farthest-side。

下面的示例将展示如何创建具有均匀间隔颜色停止的径向渐变。

.gradient {
    /* 备份 */
    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() 的形状参数用来定义径向渐变的最终形状。它可以取值圆或椭圆。下面是一个例子：

.gradient {
    /* 备份 */
    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);
}

注意：如果省略或未指定形状参数，则如果大小为单个长度，则结束形状默认为圆形，否则为椭圆。

设置径向渐变的大小

radial-gradient()函数的size参数用于定义渐变的结束形状的大小，大小可以设置使用单位或关键字：closest-side, farthest-side, closest-corner, farthest-corner。

.gradient {
    /* 备份 */
    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);
}

重复径向渐变

还可以使用repeat- radial-gradient()函数重复径向渐变。

.gradient {
    /* 备用 */
    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 {
    /* 备份 */
    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");
}