我调了个苹果图标同款圆角，这个工具太省心了
上周做UI改版，想把按钮做成iOS那种顺滑的超椭圆圆角——就是比普通border-radius更连贯、苹果App图标那种形状。试了好几个在线工具，要么只能导出固定形状，要么要注册登录，气得我差点自己写公式。后来在V2EX上翻到一个独立开发者做的工具，叫Squircle Generator，纯前端、免费、不用注册，拖几个滑块就能出图，当场就存了书签。
【拖滑块就能调出苹果味】 打开页面就是实时预览区，左边三个滑块分别控制宽度、高度和圆角平滑度（其实就是超椭圆的指数n）。我试着把平滑度拉到中间偏右，形状立刻从方角变成那种连续曲率的圆润感，跟iOS图标几乎一样。下面还带了颜色选择器，选完色直接看效果，不用切到设计软件里反复调。最方便的是预设区，内置了iOS应用图标、按钮、卡片、头像几套参数，点一下就能套用，省得自己盲猜数值。
【一键复制代码，不用再手写clip-path】 以前调这种形状，得自己算超椭圆公式|x/a|^n + |y/b|^n = 1，再手动生成路径，费时还容易出错。这个工具直接给两个出口：点一下复制CSS clip-path: path()，粘贴到样式表里就能用；或者下载像素级精确的SVG，丢进Figma或Sketch里继续改。整站是纯前端零构建，所有几何计算都在本地浏览器完成，不上传也不存储任何数据，隐私方面很放心。
【独立开发者做的免费小工具，够用就好】 作者在V2EX帖子里说，自己折腾UI时发现现成工具要么限制多要么要登录，干脆写了一个自用，顺手分享出来。目前没有广告、没有付费墙，连水印都没有。如果你也经常跟圆角形状打交道，或者想给页面加点iOS那种细腻感，可以试试。对了，如果你发现缺什么功能，可以直接给作者发邮件反馈，他说会持续改进。你们平时做超椭圆一般用啥工具？有更好用的也欢迎告诉我。
评论
暂无评论