CSS Images: Using CSS gradients

CSS gradients是<image>由两种或多种颜色之间的渐变过渡构成的特殊类型。您可以选择两种类型的渐变：线性（使用linear-gradient()函数创建）和径向（使用创建radial-gradient()）。

渐变可以在任何地方使用。<image>，例如在背景中。因为梯度是动态生成的，所以它们可以否定传统上用来实现类似效果的光栅图像文件的需求。此外，由于渐变是由浏览器生成的，所以当缩放时，它们看起来比光栅图像更好看，并且可以动态调整大小。

使用线性梯度

线性渐变会产生一条直线上前进的颜色带。

基本线性梯度

要创建最基本的渐变类型，只需指定两种颜色。这些叫做颜色停止你必须至少有两个，但你想要多少就有多少。

.simple-linear {
  background: linear-gradient(blue, pink);
  width: 100px;
  height: 100px;
}

改变方向

默认情况下，线性梯度从上到下运行。您可以通过指定方向来更改它们的旋转。

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
  width: 100px;
  height: 100px;
}

对角线梯度

你甚至可以使梯度从一个角到另一个角对角运行。

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
  width: 200px;
  height: 100px;
}

使用角度

如果你想要更多地控制它的方向，你可以给梯度一个特定的角度。

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
  width: 100px;
  height: 100px;
}

当使用角度时，0deg创建一个从下到上运行的垂直梯度，90deg在顺时针方向上创建一个水平梯度，从左到右运行，以此类推。负角沿逆时针方向运动。

使用两种以上的颜色

你不必限制自己两种颜色 - 你可以使用尽可能多的！默认情况下，颜色沿渐变均匀分布。

.auto-spaced-linear {
  background: linear-gradient(red, yellow, blue, orange);
  width: 100px;
  height: 100px;
}

定位颜色停止

你必须让你的颜色停止在他们的默认位置。要微调他们的位置，你可以给每个人一个百分比或绝对长度值。如果将位置指定为百分比，0%表示起点，而100%表示结束点；但是，如果有必要，可以在该范围之外使用值以获得所需的效果。如果您没有指定某个位置，则将自动计算该特定颜色停止的位置。

.multicolor-linear {
  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
  width: 100px;
  height: 100px;
}

叠加梯度

渐变支持透明度，所以你可以叠加多个背景，以实现一些相当奇特的效果。背景从上到下堆叠，第一个指定在顶部。

.layered-image {
  background: linear-gradient(to right, transparent, white),
      url(?developer/section/1072117/"http:/www.foo.com/image.jpg");
}

叠加梯度

您甚至可以与其他渐变叠加渐变。只要顶部的渐变是%27T完全不透明的，下面的渐变仍然是可见的。

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  width: 200px;
  height: 200px;
}

径向梯度

径向梯度类似于线性梯度，只不过它们从中心点辐射出去。你可以使它们成圆形或椭圆形。

基本径向梯度

与线性梯度一样，创建径向梯度所需的只有两种颜色。

.simple-radial {
  background: radial-gradient(red, blue);
  width: 100px;
  height: 100px;
}

定位径向色站

再一次，像线性梯度一样，你可以用百分比或绝对长度来定位每个径向颜色停止。

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
  width: 100px;
  height: 100px;
}

径向梯度

与线性梯度不同，您可以指定径向梯度的大小。

例子：椭圆最接近的一面

此示例使用closest-side大小值，这意味着大小由从起始点（中心）到封闭框最靠近的一侧的距离来设置。

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
  width: 250px;
  height: 100px;
  border: 1px solid;
}

例子：椭圆的最远角

此示例与前面的示例相似，但其大小指定为farthest-corner，它设置梯度的大小从起点到包盒的最远角的距离，从起点开始。

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner,
      red, yellow 10%, #1e90ff 50%, beige);
  width: 250px;
  height: 100px;
  border: 1px solid;
}

例子：圆的最接近的一面。

这个例子使用closest-side，这使得圆的大小是起点（中心）和最接近的一边之间的距离。圆的半径是盒子高度的一半，因为顶边和底边距离起点等距，比左边和右边更近。

.radial-circle-close {
  background: radial-gradient(circle closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
  width: 250px;
  height: 100px;
  border: 1px solid;
}

<div class="radial-circle-close"></div>

叠加径向梯度

就像线性梯度，你也可以叠加径向梯度。第一个指定在顶部，最后一个在底部。

.stacked-radial {
  background: 
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

使用重复梯度

linear-gradient()和radial-gradient()属性不支持%27T自动重复颜色停止。但是，repeating-linear-gradient()和repeating-radial-gradient()属性可用于提供此功能。

重复线性梯度

此示例使用repeating-linear-gradient()在一条直线上反复前进的渐变。当渐变重复时，颜色会被反复循环。

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
  width: 100px;
  height: 100px;
}

多重重复线性梯度

.multi-repeating-linear {
  background:
      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
        rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
        rgba(255, 0, 0, 0.5) 230px),
      repeating-linear-gradient(23deg, red 50px, orange 100px,
        yellow 150px, green 200px, blue 250px,
        indigo 300px, violet 350px, red 370px);
  width: 600px;
  height: 400px;
}

例子：格子梯度

.plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
  width: 200px;
  height: 200px;
}

重复径向梯度

此示例使用repeating-radial-gradient()创建一个从中心点反复辐射的渐变。当渐变重复时，颜色会被反复循环。

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  width: 100px;
  height: 100px;
}

多重重复径向梯度

.multi-target {
  background: 
      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
        rgba(255,255,255,0.5) 30px) top left no-repeat, 
      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
  width: 250px; 
  height: 150px;
}

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18