iPhone 圆角曲率详解

苹果公司在 iPhone 设计中采用了独特的圆角处理方式，其并非简单的 CSS border-radius，而是基于“超椭圆”（Superellipse）或连续曲率（Continuous Curvature）的数学模型，使圆角过渡更自然、视觉更柔和。

什么是圆角曲率？

传统圆角使用固定半径（如 border-radius: 20px），而 iPhone 的圆角在转角处的曲率是连续变化的，避免了视觉上的“突兀感”。这种设计语言被称为“squircle”（方形+圆形的合成词）。

CSS 如何近似模拟？

虽然纯 CSS 无法完美复现 Apple 的 squircle，但可通过较大且精确的 border-radius 值来接近。例如，iPhone 14 Pro 的屏幕圆角约为 54px（以 1170×2532 分辨率为基准）。

设计建议

在开发 iOS 风格的 Web 应用或组件时，建议使用以下值作为参考：

• 小按钮：8–12px
• 卡片容器：20–30px
• 全屏模态/设备轮廓：50–56px（视设备尺寸而定）