html - 循环方式的CSS3线性渐变

Question

我想知道是否可以用 css 渐变做这样的事情:

我搜索了很多，所有渐变都是“线性”或“径向”。我想要的渐变是线性的，呈圆形!

Answer 1

-- 更新了 2022 年初的信息 --

它现在是可行的 - 至少对于大多数浏览器来说是这样。 CSS 属性 conic-gradient可以轻松实现这一点:

html, body { margin: 0; padding: 0; }
.box {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 100px;
}
.colorwheel {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    border-radius:50%;
}
.fallback {
    text-align: center;
    padding: 50px 0;
}

<div class="fallback box">
    If you can read<br>this, your browser<br>doesn't support<br>conic-gradient yet.
</div>
<div class="colorwheel box"></div>

此 CSS 函数在 CSS 图像模块级别 4 的编辑草案中指定，目前由大多数浏览器(包括许多移动浏览器)实现。检查Can I use获取当前支持。