html5 / css3中的贝塞尔曲线梯度

Question

看起来不可能做非线性（例如Bezier曲线填充）css3渐变;谁有人知道它是否可以在html5画布中使用？

Answer 1

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

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

你可能会在Colorzilla gradient generator的渐变下弄乱小方块，或者阅读MDN linear-gradient article以获取有关创建自己的色块的详细信息。

色彩停止可以非常有创意地使用，特别是与background-size结合使用。这是使用渐变构建的一个很棒的collection of CSS patterns。

CSS预处理器也可用于生成感觉非线性的渐变（尽管它们只需生成大量停顿而无需考虑每个渐变）。最近的CSS Tricks article about easing linear gradients演示了一种这样的方法。