我们已经可以很容易地用css做线性gradients和径向gradients]，现在有第三种类型的渐变将在规范中定义(https://www.w3.org/TR/css-images-4/).圆锥渐变类似于径向渐变，不同之处在于色标位于创建的圆的外边缘。
例如，下面是具有相同色标的径向渐变和圆锥渐变：
1.gradient {
2 width: 200px;
3 height: 200px;
4 border-radius: 50%;
5}
6.radial {
7 background: radial-gradient(#FAE042, #4AAE9B);
8}
9.conic {
10 background: conic-gradient(#FAE042, #4AAE9B);
11}
这里是标记：
1<div class="gradient radial"></div>
2<div class="gradient conic"></div>
更多示例/语法
圆锥渐变可以有多个色标：
1.conic {
2 background: conic-gradient(cyan, magenta, yellow, black);
3}
每种颜色都可以使用度、转数或百分比等单位指定其停止位置：
1.conic {
2 background: conic-gradient(red 180deg, #4AAE9B);
3}
4.conic-2 {
5 background: conic-gradient(red 180deg 90%, #4AAE9B);
6}
<$>[注意]请注意色标的第二个位置值如何指定过渡。<$>
硬停机
通过消除两个色标之间的过渡，色标可以立即跳转到下一个颜色：
1.conic-4 {
2 background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
3}
From和at关键字
可以使用from关键字指定起始角度：
1.conic {
2 background: conic-gradient(from 45deg, cyan, magenta, yellow);
3}
此外，还可以使用at关键字指定过渡的中心：
1.conic {
2 background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
3}
<$>[警告]不幸的是，我现在不能展示使用at的示例，因为在撰写本文时，PolyFill中有一个bug，它会使所有其他示例在依赖PolyFill的浏览器中查看时崩溃。<$>
平滑过渡
要实现平滑过渡，请使最后一个色标与第一个色标相同：
1.conic {
2 background: conic-gradient(cyan, magenta, yellow, cyan);
3}
重复二次曲线渐变
还有一个repeating-conic-gradient函数，可以用来创建一些有趣的圆锥梯度图案：
1.conic-repeating {
2 background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
3}
PolyFill
截至2020年，全球只有85%的设备支持‘二次曲线级’property.不过，值得庆幸的是，现在有一个polyfillby@leaverou，我们可以用它来开始使用二次曲线渐变。
要使用多边形填充，只需在页面中的结束Body标记之前添加Prefix-free脚本和圆锥渐变多边形填充本身：
1<script src="/assets/polyfills/prefixfree.min.js"></script>
2<script src="/assets/polyfills/conic-gradient.js"></script>