Firefox 3.6 包含许多 CSS 改进。在这篇文章中，我们将向您展示如何使用 CSS 渐变。

如果您正在运行最新的 Firefox 3.6 beta 版，您应该查看我们的 交互式演示 并查看相应的代码。使用单选按钮来打开或关闭不同的样式选项。

带有 CSS 渐变的背景

在背景中使用 CSS 渐变可以让您在两种或多种指定颜色之间显示平滑过渡，而无需使用图像。这反过来可以减少下载时间和带宽使用，在缩放时看起来更好，并可以让您创建更灵活的布局。

Firefox 3.6 支持两种类型的 CSS 渐变：线性 (-moz-linear-gradient) 和径向 (-moz-radial-gradient).

线性渐变

要创建 线性渐变，您需要设置一个起点和渐变的方向（或角度）以及定义颜色停靠点。

 -moz-linear-gradient( [ || ,]? ,  [, ]* )

起点。起点的工作方式与 背景位置 一样。您可以将水平和垂直位置设置为百分比、像素或使用 left/center/right 表示水平，以及 top/center/bottom 表示垂直。位置从左上角开始。如果您没有指定水平或垂直位置，它将默认设置为居中。

例如，以下是一个从蓝色到白色的线性渐变，从中心（水平）和顶部（垂直）开始。

  .linear_gradient_square {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    background: -moz-linear-gradient(top, blue, white);
  }

另一个从左侧（水平）和居中（垂直）开始的渐变。

    background: -moz-linear-gradient(left, blue, white);

以及一个从左侧（水平）和顶部（垂直）开始的渐变。

    background: -moz-linear-gradient(left top, blue, white);

角度。如上所示，如果您没有指定角度，它将根据起始位置自动定义。如果您想要更精确地控制渐变的方向，您也可以设置 角度。

例如，以下渐变具有相同的起始位置，即左侧居中，但右侧的渐变还具有 20 度的角度。

    background: -moz-linear-gradient(left 20deg, black, white);

在指定角度时，请记住它是在水平线和渐变线之间形成的角度，以逆时针方向计算。所以使用 0deg 会生成从左到右的水平渐变，而 90deg 会生成从下到上的垂直渐变。

    background: -moz-linear-gradient(, red, white);

颜色停靠点。除了起始位置和角度之外，您还应该指定颜色停靠点。颜色停靠点是渐变线上的点，它们将具有在指定位置（以百分比或长度设置）指定的颜色。颜色停靠点的数量没有限制。如果您对位置使用百分比，则 0% 表示起点，100% 表示终点，但可以使用超过或低于这些值的数字来实现所需的效果。

以下是一个包含三个颜色停靠点的简单示例。由于没有为第一个和最后一个颜色指定点，它们将默认设置为 0% 和 100%。

    background: -moz-linear-gradient(top, blue, white 80%, orange);

如果未指定位置，颜色将均匀分布。

    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

透明度。渐变也支持透明度。例如，在堆叠多个背景时，这很有用。以下组合了两种背景：一张图像和一个从白色到透明白色的线性渐变。

.multibackground_transparent {
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}

径向渐变

径向渐变的语法与线性渐变非常相似。

 -moz-radial-gradient([ || ,]? [ || ,]? , [, ]*);

除了您已经在线性渐变中看到的起始位置、方向和颜色之外，径向渐变还允许您指定渐变的形状（圆形或椭圆形）和大小（最近端、最近角、最远端、最远角、包含或覆盖）。

颜色停靠点。与线性渐变一样，您应该在渐变线上定义颜色停靠点。以下圆形具有相同的颜色停靠点，但左侧的渐变默认设置为均匀分布的颜色，而右侧的渐变为每种颜色设置了特定位置。

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

形状。这里您可以看到两种可能的形状之间的区别，即圆形（左侧）和椭圆形（右侧），两者都以左下角为起点。

 .radial_gradient_circle {
    background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
}
 .radial_gradient_ellipse {
    background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
}

大小。大小的不同选项（最近端、最近角、最远端、最远角、包含或覆盖）指的是用于定义圆形或椭圆形大小的点。

示例：椭圆形的最近端与最远角。
以下两个椭圆形具有不同的尺寸。左侧的椭圆形由起点（中心）到最近端的距离决定，而右侧的椭圆形由起点到最远角的距离决定。

  background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
  background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

示例：圆形的最近端与最远端。
左侧圆形的大小由起点（中心）到最近端的距离决定，而右侧圆形的大小由起点到最远端的距离决定。

 background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
 background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

示例：包含的圆形。
这里您可以看到左侧的默认圆形，以及相同的渐变的包含版本（右侧）。

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(contain, red, yellow, #1E90FF);

重复渐变

如果您想重复渐变，您应该使用 -moz-repeating-linear-gradient 和 -moz-repeating-radial-gradient。

在下面的示例中，每种情况下都指定了四个颜色停靠点，并且它们被无限期地重复。

 .repeating_radial_gradient_example {
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
 .repeating_linear_gradient_example {
     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

演示

查看我们的 线性渐变和径向渐变的交互式演示 以获取更多示例。

请注意，渐变语法在 Firefox 3.6 beta 1 和 beta 2 之间有所变化，因此如果您在 beta 1 中使用过渐变，您可能需要更新您的代码。