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

例如，这里有一个径向渐变和一个圆锥渐变，它们具有相同的色标：

.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关键字指定起始角度：

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

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

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

不幸的是我不能显示使用的例子在，因为在写这篇文章的时间在这一刻有一个错误的填充工具，这将使在依赖于填充工具浏览器中查看时，所有其他的例子崩溃。

平滑过渡

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

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

重复圆锥梯度

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

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

填充物

截至 2020 年，全球只有 85% 的设备支持该conic-gradient属性。值得庆幸的是，虽然，有一个填充工具通过@LeaVerou，我们可以使用现在就开始使用圆锥梯度。

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

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