使用 CSS Houdini 绘制平滑圆角

使用 CSS Houdini 绘制平滑圆角

 

原文链接： http://iamvdo.me/en/blog/smooth-corners-with-css-houdini
已得到原文作者  Vincent De Oliveira 许可

最近，我在推特分享了一篇关于人机交互界面的视错觉的文章。我向来喜欢视错觉，但这篇文章传达了一个新观点：与几何上的正圆比起来，一个微调过的圆形有可能给人以更加圆的感觉，而这一点对于圆角矩形同样适用。同时，我也惊奇地发现苹果从 iOS 7 开始就对系统图标做了同样的调整。在数学上，我们称这个调整过的圆角矩形在为超椭圆。

iOS 6 与 iOS 7 的图标外形差异

与此同时，为了准备一场讲演，我做了一些关于 CSS Houdini 的绘图 API（Paint API）的实验。这个 API 定义了一种新的在浏览器的渲染阶段往 CSS 图像中添加内容的方式。简单地说，浏览器给我们提供了用程序绘制一个 CSS 图像并用作背景的能力。因此，我们应该可以很简单地绘制一个超椭圆。

几个星期后，Sketch 添加了一个平滑圆角（smooth corners）的功能。据我所知，平滑圆角实际上就是超椭圆。我喜欢「平滑圆角」这个名字，于是在这