Html CSS3圆形线性梯度

我想知道是否可以用css渐变来做类似的事情：

---

我搜索了很多，所有的渐变要么是“线性”要么是“径向”。我想要的梯度是圆形的线性

恐怕CSS不允许线性径向渐变。然而，svg提供了一个解决方案，尽管它很粗糙。有关解决方案，请参阅以下主题

---

SVG使我的工作非常努力。 我找到的最佳解决方案是使用多个圆形切片并对其着色。它是纯css3

问题是：如何使颜色变化平滑？ 我找到了答案： 通过使用模糊过滤器

以下是完整的解决方案：

---

这被称为锥形渐变，目前在纯CSS中不可能实现，但它已被提议用于CSS图像值4草稿。最近对他们来说，也有类似的情况。

CSS 这可以使用多个部分来完成，然后旋转这些部分来创建一个圆。

.wheel，
雨伞
.颜色{
内容：“；
位置：绝对位置；
边界半径：50%；
宽度：15em；
高度：15公分；
保证金：0；
填充：0；
}
.车轮{
溢出：隐藏；
宽度：15em；
高度：15公分；
位置：相对位置；
}
.雨伞{
位置：相对位置；
-webkit转换：规模（1.35）；
}
颜色
.颜色：第n个子项（n+7）：之后{
剪辑：rect（0,15em，15em，7.5em）；
}
.颜色：之后，
.颜色：第n个子项（n+7）{
内容：“；
位置：绝对位置；
边界半径：50%；
左：钙（50%-7.5em）；
顶部：钙（50%-7.5em）；
宽度：15em；
高度：15公分；
剪辑：rect（0,7.5em，15em，0）；
}
.颜色：第n个孩子（1）：之后{
背景色：#9ED110；
变换：旋转（30度）；
z指数：12；
}
.颜色：第n个孩子（2）：之后{
背景色：#50B517；
变换：旋转（60度）；
z指数：11；
}
.颜色：第n个孩子（3）：之后{
背景色：#179067；
变换：旋转（90度）；
z指数：10；
}
.颜色：第n个孩子（4）：之后{
背景色：#476EAF；
变换：旋转（120度）；
z指数：9；
}
.颜色：第n个孩子（5）：之后{
背景色：#9f49ac；
变换：旋转（150度）；
z指数：8；
}
.颜色：第n个孩子（6）：之后{
背景色：#CC42A2；
变换：旋转（180度）；
z指数：7；
}
.颜色：第n个孩子（7）：之后{
背景色：#FF3BA7；
变换：旋转（180度）；
}
.颜色：第n个孩子（8）：之后{
背景色：#FF5800；
变换：旋转（210度）；
}
.颜色：第n个孩子（9）：之后{
背景色：#FF8100；
变换：旋转（240度）；
}
.颜色：第n个孩子（10）：之后{
背景色：#FEAC00；
变换：旋转（270度）；
}
.颜色：第n个孩子（11）：之后{
背景色：#FFCC00；
变换：旋转（300度）；
}
.颜色：第n个孩子（12）：之后{
背景色：#EDE604；
变换：旋转（330度）；
}

现在可以了——至少在Chrome中是这样。CSS属性可以轻松实现这一点：

html，正文{margin:0；padding:0；}
.盒子{
位置：绝对位置；
宽度：200px；
高度：200px；
左：100px；
}
.色轮{
背景：圆锥形梯度（红色、黄色、石灰色、浅绿色、蓝色、洋红、红色）；
边界半径：50%；
}
.撤退{
文本对齐：居中；
填充：50px0；
}

如果您可以阅读
这篇文章，您的浏览器
还不支持
圆锥梯度。

我只是想为我自己的项目想出一个点子。我不想使用“圆锥梯度”，因为此时（2019年年中）它的支撑非常低。因此，我提出了以下建议：

  background: 
    radial-gradient(circle at 38% 7% ,rgba(255,255,000,1) 20%,rgba(255,255,000,.0) 38%),
    radial-gradient(circle at 50% 0%,rgba(128,255,000,1) 22%,rgba(128,255,000,.0) 48%),
    radial-gradient(circle at 75% 7% ,rgba(000,255,000,1) 22%,rgba(000,255,000,.0) 48%),
    radial-gradient(circle at 93% 24%  ,rgba(000,255,128,1) 22%,rgba(000,255,128,.0) 48%),
    radial-gradient(circle at 100% 50%,rgba(000,255,255,1) 22%,rgba(000,255,255,.0) 48%),
    radial-gradient(circle at 93% 75% ,rgba(000,128,255,1) 22%,rgba(000,128,255,.0) 48%),
    radial-gradient(circle at 75% 93%,rgba(000,000,255,1) 22%,rgba(000,000,255,.0) 48%),
    radial-gradient(circle at 50% 100% ,rgba(128,000,255,1) 22%,rgba(128,000,255,.0) 48%),
    radial-gradient(circle at 25% 93%,rgba(255,000,255,1) 22%,rgba(255,000,255,.0) 48%),
    radial-gradient(circle at 7% 75%,rgba(255,000,128,1) 22%,rgba(255,000,128,.0) 48%),
    radial-gradient(circle at 0% 50%,rgba(255,000,000,1) 22%,rgba(255,000,000,.0) 48%),
    radial-gradient(circle at 7% 25%,rgba(255,128,000,1) 22%,rgba(255,128,000,.0) 48%);

它不精确，但它足够接近我的需要。我在alpha透明的东西后面使用它，所以你一次只能看到一小部分

---

我想我会把它放在这里，以防有人需要。

你可以使用3个用公共圆切割的三角形。每个三角形由具有线性梯度的长矩形通过中心投影进行变换。 我尝试在Firefox中使用SVG，但Chromium不支持SVG中的中心投影，但支持锥形渐变，所以请参阅两种浏览器的组合版本

有趣的问题。但是我认为仅仅使用CSS渐变是不可能的。我用CSS和javascript提出了一个混乱的解决方案。我可以创建许多圆形切片并给它们上色。但我不认为这是最好的方法。事实上，这是我能想到的使用纯CSS的最好方法。这对CSS来说是非常困难的。使用Canvas或SVG会很容易。查看SVG/Canvas实现的详细信息。还有其他SVG和CSS（锥形渐变）的答案，你会发现它们很有用。我刚刚发现在IE9+中，除了画布和SVG之外，模糊过滤器并不存在。因此，该方法不能用于IE9+。真是个惊喜！！！这就是我推荐SVG/Canvas的原因，但看到您的答案后，我认为您不需要支持IE9。看看我在评论中链接的答案，或者伊利亚的答案中提到的polyfill。polyfill还仅使用画布和/或SVG。仅链接的答案不是很有用——当链接消失或内容更改时，答案将失去其价值。请更新答案以包含链接中的有用内容，否则此答案有被删除的风险。很好，但解决方案仅适用于细圆轮廓