径向渐变配方

径向渐变 非常酷。 令人惊叹的是，我们可以如此轻松地用它们为元素绘制背景。 不过，轻松是相对而言的。 它当然比需要在第三方软件中创建图形用作背景更容易，并且语法非常易于学习。 但如果您不经常使用它，也不那么容易记住，而且它比 linear-gradient() 更复杂。

我认为我会整理一个参考示例页面，这样如果您知道需要什么但忘记了语法，就可以在这里轻松找到该入门代码示例。

居中爆炸

最简单的语法将第一个颜色放置在元素的中心，将第二个颜色放置在外部，就这样

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 径向渐变 - 居中 示例。

但是，这会将渐变拉伸到非方形元素上的椭圆形。 如果您不喜欢这样，您可以强制形状变为圆形，就像此处的第二个示例所示

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 径向渐变 - 圆形与椭圆形 示例。

您还可以通过以下方式控制大小，即直接说明圆形/椭圆形应有多大（最终颜色仍然会拉伸以覆盖元素）：

• 使用关键字 closest-side、farthest-side、closest-corner、farthest-corner
• 明确地说，比如 radial-gradient(circle 100px, ...)
• 使用颜色停止，比如 radial-gradient(#56ab2f, #a8e063 150px)

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 径向渐变 - 大小 示例。

以下是一些正在使用的内容

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 径向渐变的用法 示例。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 点亮文字 示例。

已定位

除了控制渐变的大小和形状外，径向渐变的另一个重要技巧是您可以定位它们的中心。

我认为这是渐变生成器的一个缺点。 它们可以帮助您选择颜色和颜色停止等内容，但通常会回避定位方面的内容。

径向渐变的中心不必位于中心！ 例如，您可以将中心定位在左上角，如下所示

.element {
  background: radial-gradient(
    at top left,
    var(--light), var(--dark) /* using variables just for fun! */
  )
}

以下是所有四个角

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 已定位的径向渐变 示例。

您还可以进行非常具体的定位。 以下是一个渐变示例，它精确地定位在元素底部左侧 195px 处。 它也有一个特定的尺寸，但除此之外，它使用默认的椭圆形形状

.element {
  background: radial-gradient(
    150px 40px at 195px bottom,
    #666, #222
  );
}

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 已特定定位的渐变 示例。

还有一点需要注意的是，您可以在渐变中使用 transparent 来公开后面的颜色（如果需要），或者使用像 rgba(255, 255, 255, 0.5) 这样的部分透明颜色在着色颜色停止处执行相同的操作。

此外，径向渐变可以与多个背景一起使用，将多个渐变应用于单个元素，甚至可以重叠！

.element {
  background: 
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.5), 
      transparent 100px
    ),
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.5), 
      transparent 100px
    ),
    radial-gradient(
      at bottom left,
      rgba(255, 0, 255, 0.5), 
      transparent 400px
    ),
    radial-gradient(
      at bottom right,
      rgba(255, 100, 100, 0.5), 
      transparent 400px
    );
}

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 多个渐变 示例。

为了突出显示渐变中心可以位于任何位置的思想，以下是一个跟随鼠标移动的渐变

查看 CodePen 上 Leo Sammarco (@lsammarco) 的 径向渐变随鼠标移动 示例。

资源

人们倾向于考虑浏览器支持，而且理所当然，但在这种情况下不要想太多。 我们几乎在 所有地方都提供支持，即使没有任何前缀。

• 还有 repeating-linear-gradient()，Ana Tudor 详细介绍了 它的一些细节和用例。
• 需要一些在渐变中很好地组合在一起的颜色吗？ uiGradients 很好。
• MDN 上的径向渐变
• 在此查看我们关于所有渐变的完整指南！

好的，再见！

查看 CodePen 上 Marty Saetre (@msaetre) 的 CSS 日出日落 示例。