CSS中的圆锥渐变介绍

我们已经可以很容易地用 CSS 做 线性渐变 和 径向渐变 ，现在有第三种类型的渐变将在规范 中定义为 。 圆锥渐变类似于径向渐变，不同之处在于色标位于创建的圆的外边缘。

例如，这是具有相同色标的径向渐变和圆锥渐变：

.gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.radial {
  background: radial-gradient(#FAE042, #4AAE9B);
}
.conic {
  background: conic-gradient(#FAE042, #4AAE9B);
}

这是标记：

<div class="gradient radial"></div>
<div class="gradient conic"></div>

更多示例/语法

圆锥渐变可以有多个色标：

.conic {
  background: conic-gradient(cyan, magenta, yellow, black);
}

---

每种颜色都可以使用度、圈数或百分比等单位指定其停止位置：

.conic {
  background: conic-gradient(red 180deg, #4AAE9B);
}
.conic-2 {
  background: conic-gradient(red 180deg 90%, #4AAE9B);
}

请注意色标的第二个位置值如何指定过渡。

---

硬停

颜色停止可以通过消除两个停止之间的过渡立即跳转到下一个颜色：

.conic-4 {
  background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
}

from 和 at 关键字

您可以使用 from 关键字指定起始角度：

.conic {
  background: conic-gradient(from 45deg, cyan, magenta, yellow);
}

此外，您可以使用 at 关键字来指定过渡的中心：

.conic {
  background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}

不幸的是，我目前无法展示使用 at 的示例，因为在撰写本文时 在 polyfill 中有一个错误 会导致所有其他示例在查看时崩溃一个依赖于 polyfill 的浏览器。

平滑过渡

为了平滑过渡，让最后一个色标与第一个色标相同：

.conic {
  background: conic-gradient(cyan, magenta, yellow, cyan);
}

重复圆锥梯度

还有一个 repeating-conic-gradient 函数可以用来创建一些有趣的圆锥渐变图案：

.conic-repeating {
  background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
}

填充物

截至 2020 年， 全球只有 85% of 个设备支持圆锥梯度属性 。 不过值得庆幸的是，我们现在可以使用 @LeaVerou 的 polyfill 来开始使用圆锥渐变。

要使用 polyfill，只需在页面的结束 body 标记之前添加 Prefix-free 和圆锥渐变 polyfill 本身的脚本：

<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>