css圆角平滑,使用 CSS Houdini 绘制平滑圆角

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

iOS 7 开始就对系统图标做了同样的调整。在数学上，我们称这个调整过的圆角矩形在为 超椭圆。

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

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

几个星期后，Sketch 添加了一个平滑圆角(smooth corners)的功能。据我所知，平滑圆角实际上就是超椭圆。我喜欢「平滑圆角」这个名字，于是在这里给大家展示如何使用

CSS 绘制平滑圆角

首先，我们给paintWorkle添加一个绘图模块[1]

(CSS.paintWorklet || paintWorklet).addModule('smooth-corners.js')

复制代码

然后，在这个模块中，我们注册一个绘图过程(paint)，名字叫做 smooth-corners，