CSS3 渐变

Created: October-16, 2018

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

使用 CSS3 渐变

CSS3 渐变功能提供了一种灵活的解决方案，可在两种或多种颜色之间生成平滑过渡。早些时候，为了达到这样的效果，我们不得不使用图像。使用 CSS3 渐变可以减少下载时间并节省带宽使用。具有渐变的元素可以在不损失质量的情况下按比例放大或缩小，并且输出将呈现得更快，因为它是由浏览器生成的。

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

创建 CSS3 线性渐变

要创建线性渐变，你必须至少定义两个色标。但是，要创建更复杂的渐变效果，你可以定义更多色标。颜色停止是你想要渲染平滑过渡的颜色。你还可以设置应用渐变效果的起点和方向（或角度）。使用关键字创建线性渐变的基本语法可以通过以下方式给出：

linear-gradient (direction, 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);
    /* Standard syntax */
    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);
    /* Standard syntax */
    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);
    /* Standard syntax */
    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);
    /* Standard syntax */
    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);
    /* Standard syntax */
    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%);
    /* Standard syntax */
    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%);
    /* Standard syntax */
    background: repeating-linear-gradient(black, white 10%, lime 20%);
}

创建 CSS3 径向渐变

在径向渐变颜色中，从单个点出现并以圆形或椭圆形状向外平滑地扩散，而不是像线性梯度那样在单个方向上从一种颜色渐变到另一种颜色。创建径向渐变的基本语法可以通过以下方式给出：

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);
    /* Standard syntax */
    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);
    /* Standard syntax */
    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);
    /* Standard syntax */
    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%);
    /* Standard syntax */
    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");
    /* Standard syntax */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}