HTML5/CSS3中的贝塞尔曲线渐变

Question

21

看起来不可能在CSS3渐变中实现非线性（例如贝塞尔曲线填充）；有人知道在HTML5画布中是否可能实现吗？

- stephenwil

3

CSS3 中唯一的非线性渐变类型是径向渐变。 - Zoltan Toth

1

谢谢，但我的意思是非线性和非径向的。 - stephenwil

2

@stephenwil 嗯，Zoltans的评论基本上说得很准确。这是不可能的（尽管：您可以组合多个背景来实现非线性渐变效果）。 - Rob W

好的，谢谢大家的回复。 - stephenwil

我知道已经有一段时间了，但现在除了线性和径向渐变之外，还有锥形渐变的规范。锥形渐变规范。 - Chris Ruppel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Ruppel · Accepted Answer

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

要解决前者：很遗憾，目前还没有办法实现非线性CSS渐变填充。但是，您可以使用连续的颜色停止来实现对渐变形状的某些程度的控制。

您可以在Colorzilla渐变生成器下的小方块中进行操作，或阅读MDN linear-gradient文章以获取有关创建自己的颜色停止的详细信息。

颜色停止可以相当有创意地使用，特别是与background-size组合使用。这里有一个使用渐变构建的很棒的CSS模式集合。

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