Skip to Content
博客Squircle 不是圆角

Squircle 不是圆角

把圆角滑条拉满,看起来仍像一张贴纸。

iOS 主屏幕吃的是连续曲率(超椭圆),不是 CSS 的 border-radius。2025-12-10 的版本把 Squircle 和渐变编辑放进同一条路径。

Zapicon · Squircle
圆角矩形
Squircle

左边是普通圆角矩形。右边是连续曲率。iOS 主屏幕认后者。

什么时候开

iOS 或要跟 iOS 放在一起的营销图:开 Squircle,留内边距,底不要透明。Apple 会铺满遮罩。

Android:别依赖 Squircle 当最终形状。系统还要套自适应遮罩。前景往里收。见 设计规范

Windows / Web:方形或透明底更常见。Squircle 当预览可以,当唯一真源不行。

渐变底在这一版一起好用了。两色加角度够大多数品牌。第三色用主题预设,见 二十五套预设

高 DPI 上预览发糊,后来在 1.1.5 修过。若你还在旧预览里对像素,更新客户端。

不要做的

  • 不要用圆形当 iOS 图标。App Store 会再套一层。
  • 不要把文字放到 Squircle 边缘。辅助线在,见 辅助线不进包
  • 不要给每个平台各画一个圆角。先出一套,再只改认不出的那一端。

下一步:调到它坐稳先看设备