我们已经可以很容易地用 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>