html - html5/css3 中的贝塞尔曲线渐变

Question

看起来不可能进行非线性（例如贝塞尔曲线填充）css3渐变；任何人都知道它是否可以在 html5 画布中使用？

Answer 1

我认为最初的评论实际上是关于渐变中从一种颜色到另一种颜色的进展速度，而不是渐变的物理形状。

解决前者：不，不幸的是，目前没有办法进行非线性 CSS 渐变填充。但是，您可以使用连续的色标来实现对渐变形状的某种程度的控制。

您可以在Colorzilla 渐变生成器中弄乱渐变下的小方块，或阅读MDN 线性渐变文章以获取有关创建自己的色标的详细信息。

色标可以非常有创意地使用，尤其是与background-size. 这是使用渐变构建的大量CSS 模式。

CSS 预处理器也可用于生成感觉非线性的渐变（尽管它们只是生成大量停止而无需您考虑每个停止）。最近一篇关于缓和线性渐变的 CSS 技巧文章展示了一种这样的方法。