硬边界渐变 - CSS-Tricks

“渐变”一词意味着从一种颜色过渡到另一种颜色。这在网页设计中非常有用，可以创建漂亮的视觉效果。不过，我们将跳过整个“过渡”部分，看看它会带来什么样的 CSS 技巧。

这是一个“传统”渐变的例子，其中颜色从一种缓慢地淡化到另一种。

渐变中有一个称为颜色停止的概念，它允许您控制颜色从一种开始过渡到另一种的位置。这是一个示例，其中第一种颜色在大部分区域都保持不变

.stripe {
  height: 100px;
  background: linear-gradient(to right, red 85%, blue);
}

诀窍在于：颜色停止点可以彼此越来越近，并且实际上可以位于相同点。这意味着颜色根本不会过渡，一种颜色停止，另一种颜色可以从精确的点开始。这是一个颜色停止点收敛的视觉解释

下面的示例看起来几乎像是两个具有两个单独背景的单独元素，但不是，它是一个具有硬边界渐变在视觉上分割空间的单个元素。如果您需要创建垂直列并在一个父元素上处理它们的背景，这是一种可能性！事实上，由于背景将覆盖整个区域，因此您不必担心元素“拉伸”到完整的高度，这使得它在我们需要基于浮动或内联块元素创建列时成为一个很好的技巧。

扩展硬边界点的概念，我们可以制作一个彩色条纹条。以下是通过移动background-position制作的不同版本。

.stripe {
  height: 15px;
  background: linear-gradient(
    to right, 
    red,
    red 20%,
    orange 20%,
    orange 40%,
    yellowgreen 40%,
    yellowgreen 60%,
    lightblue 60%,
    lightblue 80%,
    purple 80%,
    purple
  );
  margin: 0 0 20px 0;
}

.stripe:nth-child(2) {
  background-position-x: -10vw;
}

.stripe:nth-child(3) {
  background-position-x: -20vw;
}

说到条纹，这些硬边界渐变非常适合任何类型的条纹背景。使用重复渐变（例如repeating-linear-gradient()）会更容易一些，因为您不必填充 100% 的空间，您可以使用像素并在需要的位置停止。

.stripes {
  background-color: #ffd600;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 9px,
    #f4ff81 9px,
    #f4ff81 10px
  );
}

.stripes {
  background-color: #cfd8dc;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1px,
    #90a4ae 1px,
    #90a4ae 2px
  );
}

.stripes {
  background-color: #e53935;
  background-image: repeating-linear-gradient(
    10deg,
    transparent,
    transparent 20px,
    #c62828 20px,
    #c62828 23px
  );
}

.stripes {
  background-color: #689f38;
  background-image: repeating-linear-gradient(
    -25deg,
    transparent,
    transparent 40px,
    #aed581 40px,
    #aed581 50px
  );
}

.stripes {
  background-image: repeating-linear-gradient(
      90deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    linear-gradient(90deg, hsl(250, 82%, 1%), hsl(250, 82%, 1%));
}

.stripes {
  background-image: repeating-linear-gradient(
      45deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 10px,
      transparent 10px,
      transparent 100px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 50px,
      transparent 50px,
      transparent 100px
    ),
    linear-gradient(90deg, hsl(80, 0%, 20%), hsl(80, 0%, 20%));
}

还有其他类型的渐变！我们也可以将硬边界点与radial-gradient和repeating-linear-gradient一起使用！

.stripes {
  background: repeating-radial-gradient(
    circle at 100%,
    #333,
    #333 10px,
    #999 10px,
    #999 20px
  );
}

.stripes {
  background-image: radial-gradient(#90caf9 20%, transparent 20%),
    radial-gradient(#1e88e5 20%, transparent 20%);
  background-color: #64b5f6;
  background-position: top left, 50px 50px;
  background-size: 100px 100px;
}

.stripes {
  background-image: radial-gradient(
    circle at top left,
    #ec407a,
    #ec407a 20%,
    #7e57c2 20%,
    #7e57c2 40%,
    #42a5f5 40%,
    #42a5f5 60%,
    #26a69a 60%,
    #26a69a 80%,
    #9ccc65 80%
  );
}

.stripes {
  background: repeating-radial-gradient(
    circle at bottom right,
    #eee,
    #ccc 50px
  );
}

请注意，在最后一个示例中，您仍然可以看到一些颜色渐变的内容。硬边界渐变不必单独使用。那个只有一个重复的硬边界点。

圆锥形渐变是硬边界渐变的另一个主要候选者，因为当应用到圆形（例如border-radius: 50%）时，它们会立即变成饼图！

.chart {
  background: conic-gradient(
    #f15854 4%,
    #4d4d4d 0 8%,
    #5da5da 0 17%,
    #decf3f 0 48%,
    #b276b2 0 54%,
    #faa43a 0
  );
  border-radius: 50%;
  height: 0;
  padding-top: 100%;
}