# 你的圆角是假的：苹果偷走了一条1818年的曲线 ## 导语：圆角矩形，根本不存在 你每天看几百次的那个"圆角"——iPhone 图标、MacBook 屏幕边框、App 里的卡片、按钮——它很可能是个**赝品**。 绝大多数人以为"圆角"就是直角的四个顶点被削成圆弧，CSS 一句 `border-radius` 搞定。但这其实是数学上的**拼凑**：把四段圆弧硬焊在四条直线上，衔接处会出现一道肉眼可辨、却说不清哪别扭的"鼓包"。真正高级的圆角——苹果、小米、Material Design 用了十几年的那种——是一个**单一连续曲线**，叫 **squircle（方圆形）**。 这条曲线的方程，早在 **1818 年**就被法国数学家 Gabriel Lamé 写了出来；1959 年，一位写过反纳粹密码诗的丹麦全才用它解开了斯德哥尔摩的交通死结；2013 年它藏在 iOS 7 的每一个图标里；2021 年小米花了约 200 万人民币请无印良品的原研哉把 logo 改成了它；而到了 **2026 年**，CSS 终于给它留了一个原生关键字 `squircle`，结束了 `border-radius` 长达 15 年的独裁。 本期深度解读锚定 YouTube 热门设计解说视频 *Why Every Apple Product Has the Same Rounded Corners*，带你拆解：为什么"看不见的圆角"才是最贵的圆角。 --- ## 视频背景卡片 | 项目 | 内容 | |------|------| | 视频标题 | *Why Every Apple Product Has the Same Rounded Corners*（为什么每件苹果产品都有相同的圆角） | | 平台 / 类型 | YouTube · 设计科普解说（video essay） | | 核心论点 | 苹果产品统一的圆角并非偶然，背后是一条叫 squircle 的连续数学曲线 | | 核心关键词 | squircle（方圆形）、superellipse（超椭圆）、Lamé curve、iOS 7 icon mask | | 视频切入点 | iPhone / MacBook / iPad 共用的同一套圆角曲率，"非巧合"的设计纪律 | | 适合人群 | 产品与 UX 设计师、前端工程师、设计史与数学爱好者 | > 说明：因分析时网络抓取受限，视频的精确时长与播放量未能逐位核对，但其"苹果统一圆角 = squircle"的核心论点在多个独立设计媒体（fratak、Max Monastyrev、Smashing Magazine）中交叉印证一致，本文据此展开并大幅延展。 --- ## 核心内容拆解 ### 要点一：你画的"圆角矩形"，在数学上是焊出来的赝品 我们习以为常的"圆角矩形（rounded rectangle）"，本质是**两种几何的强行嫁接**：四条直线边 + 四段圆弧角。问题出在接缝——直线和圆弧在这里相切（tangent），曲率从 0（直线）瞬间跳到 1/r（圆弧）。这条**曲率不连续**的缝，在专业术语里叫 *G1 连续、而非 G2 连续*。 人的视觉对这种不连续异常敏感，哪怕你说不出"曲率跳变"四个字，你的眼睛也会觉得这个角"鼓了一块"、"圆得不够干净"。这就是为什么设计师圈流传一句话：**"圆角矩形根本不存在，它只是个被磨掉角的方框。"** 真正的解法是让整条曲线的曲率**从头到尾连续变化**，角和边是同一条曲线在不同位置的过渡——这正是 squircle 干的事。视频的核心论点正在于此：苹果所有产品的圆角"看起来一样"，不是因为半径相同，而是因为**用的是同一种连续曲线族**。 *（以上为视频论点；下面是延伸：G2 连续性是汽车外形、船舶线型设计的百年追求，软件界面只是后知后觉的受益者。）* ### 要点二：1818 年，Lamé 用一个参数写出了一整族形状 这条"完美圆角"的数学名叫 **superellipse（超椭圆）**，也叫 **Lamé 曲线**，由法国数学家 Gabriel Lamé 于 19 世纪初提出。它的方程长得吓人，逻辑却极简： ``` |x/a|ⁿ + |y/b|ⁿ = 1 ``` 只调一个参数 **n**，就能让形状在三种几何之间平滑变形： - **n = 1**：它退化成一个**菱形**（直线、尖锐）； - **n = 2**：它变成**椭圆 / 圆**（最软）； - **n → ∞**：它逼近一个**矩形**（最方）； - **n = 4**：它停在中间，成为**方圆形 squircle**——方与圆之间的黄金平衡点。 这是本视频最反直觉的洞察之一：**圆和方不是对立的，它们是同一条曲线的两个极端，中间夹着无穷多个"恰到好处"。** 你以为"圆角"是一个开关（要嘛方要嘛圆），其实它是一道**连续的光谱**，而 n≈3~4 那一段，是进化帮你选好的"看着最舒服"的位置。 ### 要点三：1959 年，一位反纳粹诗人用曲线解开了交通死结 把这条 1818 年的曲线搬进现实的人，是丹麦全才 **Piet Hein**——一个身份多到离谱的人物：诗人、物理学家（在尼尔斯·玻尔研究所搞理论物理，自嘲跟玻尔打了多年"思维乒乓球"）、设计师，二战期间还在纳粹占领下偷偷写讽刺密码诗（grooks）鼓舞抵抗运动。 1959 年，斯德哥尔摩最繁忙的广场 **Sergels Torg（赛格尔广场）** 要改建：圆形广场塞不进矩形的街区网格，矩形广场又让车流卡死。规划局找上 Piet Hein，他丢出一个答案：**用超椭圆（n≈2.5）**。结果一发命中——这个形状既能对齐方方正正的街道，又用连续曲线让车流像水一样绕过去。广场 1960 年代建成，至今仍是"一条数学曲线如何塑造一座城市人流"的经典案例。 六年后（1965），Hein 把超椭圆在三维里转了一圈，造出 **Super Egg（超级蛋）**：一个能在两端竖立、不倒的金属雕塑——因为它的曲率在顶点处归零。Georg Jensen 出了纯银版，《Life》杂志 1966 年给他写了篇《A Poet with a Slide Rule（带着计算尺的诗人）》，《科学美国人》的 Martin Gardner 反复介绍他，耶鲁 1972 年授他荣誉博士。 *（这一节视频未必详谈，但它是 squircle"为什么感觉对"最有力的人证：连城市规划这种生死攸关的尺度，都被它折服。）* ### 要点四：2013 年，iOS 7 把方圆形焊进了十亿块屏幕 squircle 真正"统治世界"，是 **iOS 7（2013 年）**。那一年苹果把拟物化（skeuomorphism）推倒重来，所有 App 图标换上一个**超椭圆蒙版（superellipse-like mask）**——不是圆角矩形，是平滑的连续曲线。 为什么图标非要用 squircle？因为图标要**成百上千个并排排列**，视觉权重的微小不均会被网格放大：纯圆太"软"、太飘；圆角矩形的接缝鼓包在密集排列时显得"碎"；squircle 把视觉重量均匀分布，让图标像瓷砖一样严丝合缝。设计师圈称之为 **"iOS 效应"**：一旦整个系统都用超椭圆曲线，普通圆弧就显得"有点不对劲"。 视频反复强调苹果的"设计纪律"：iPhone、MacBook、iPad 的边框曲率不是各拍脑袋，而是同一套连续曲线族在不同尺寸下的复用。这种一致性，是苹果"手感高级"的隐形地基。 ### 要点五：小米花 200 万改了个"看不出区别"的 Logo——钱花哪了？ 2021 年最被群嘲的设计事件：小米请无印良品艺术总监 **原研哉（Kenya Hara）** 重做 Logo，花了约 **200 万人民币**，结果网友一看——"这不就是把方的磨圆了一点点？"几乎全网调侃甲方冤大头。 但如果你读懂了 squircle，就知道钱花在哪了：原研哉做的不是"调圆角半径"，而是把 logo 的轮廓**从矩形换成了一条超椭圆曲线**（约 n≈3，融入他"Alive（ Alive 生命感）"的概念）。肉眼几乎不可辨，但数学上是质变——从"硬焊的圆角矩形"变成了"一条连续曲线"。 这正是 squircle 的**终极悖论**：**最贵的曲线，是那条你根本注意不到的曲线。** 它的全部价值都在"低于意识阈值"的地方运作，让设计"感觉更高级、更平衡"，却没人能说出为什么。原研哉收的不是改图费，是**让十亿人下意识觉得"顺眼"的曲线授权费**。 ### 要点六：你的杏仁核，在害怕尖角 为什么全人类都偏爱曲线？这不是文化、不是品味，是**大脑的出厂设置**。 2006 年，神经科学家 **Moshe Bar 与 Maital Neta** 发表了一项 fMRI 研究（*Visual Elements of Subjective Preference Modulate Amygdala Activation*）：当受试者看到**尖锐、带角的轮廓**时，大脑的**杏仁核（amygdala）**——负责威胁探测、恐惧反应的区域——会被显著激活；而看到**曲线轮廓**时，杏仁核安静下来，人产生"喜欢"的主观感受。 换句话说：**尖角在神经层面被当作"潜在威胁"来处理，曲线则被读作"安全"。** 这条偏好在婴儿身上就成立，跨文化一致——它是几百万年进化留下的快速环境评估本能（锋利的东西 = 牙齿、爪子、岩石断面 = 危险）。 这就解释了为什么 squircle 这条"既方又圆"的曲线如此讨喜：它**保留了方形的安全稳定感（杏仁核不报警的"结构感"），又用连续曲线消除了所有"威胁性尖点"**。它是写给杏仁核的一封情书。 ### 要点七：2026 年，CSS 终于给 squircle 留了一个关键字 如果你是前端，最痛的点来了：**15 年来，CSS 的 `border-radius` 只能画圆弧**，画不出 squircle。想还原苹果图标那种连续曲线？你得手搓 SVG path、塞 clip-path、或者引一个调好参的 squircle 库，还祈祷没人让你给它做动画。 **2026 年这堵墙塌了。** W3C 的 *CSS Borders and Box Decorations Module Level 4* 落地了 **`corner-shape`** 属性（截至 2026 年 3 月已进入 Chrome 139+），它不取代 `border-radius`，而是**改变 radius 生成的曲线类型**。关键字一行看懂： ``` corner-shape: round | squircle | bevel | scoop | notch | square | superellipse(n); ``` - **squircle**：那条 Apple 风连续超椭圆曲线； - **bevel**：直线斜切（宝石角）； - **scoop**：内凹（票据、有机感）； - **notch**：内凹直角（机械冲压感）； - **superellipse(n)**：自己调 n，在圆和 squircle 之间精控。 Smashing Magazine 2026 年 3 月那篇深度评测一针见血：用了 squircle 后，"**普通圆弧会突然显得有点不对劲**"——iOS 效应在网页上重现。更妙的是它**支持渐进增强**：不支持的浏览器优雅退化为 `border-radius`，支持的浏览器升级为连续曲线。`border-radius` 当年也是这么从 IE6 时代一步步吃下整个 Web 的——历史重演。 --- ## 知识结构图：squircle 从方程到产品的一条龙 ```mermaid flowchart TD A["数学根基（1818）
Lamé 曲线
|x/a|ⁿ + |y/b|ⁿ = 1"] -->|调参 n| B{"n 取值决定形状"} B -->|n=1| C1["菱形 / 尖锐"] B -->|n=2| C2["椭圆 / 圆"] B -->|n=4| C3["⭐ squircle 方圆形"] B -->|n→∞| C4["矩形 / 纯方"] C3 --> D["现实验证（1959）
Piet Hein · 斯德哥尔摩 Sergels Torg
解开交通死结 → Super Egg"] C3 --> E["数字界面（2013）
iOS 7 超椭圆图标蒙版
十亿块屏幕的统一圆角"] C3 --> F["品牌重塑（2021）
小米 · 原研哉 'Alive'
约 200 万换一条连续曲线"] D --> G["为什么'感觉对'
Bar & Neta 2006 fMRI
尖角激活杏仁核 = 进化威胁探测
曲线 = 安全"] E --> G F --> G G --> H["技术民主化（2026）
CSS corner-shape: squircle
结束 border-radius 15 年独裁"] style C3 fill:#fef3c7,stroke:#d97706,stroke-width:3px style G fill:#dbeafe,stroke:#2563eb,stroke-width:2px style H fill:#dcfce7,stroke:#16a34a,stroke-width:2px ``` --- ## 实战启示：把"看不见的高级感"装进你的设计 **如果你是产品 / UX 设计师**，第一课是**戒掉无脑 `border-radius`**。Figma 早在几年前就内置了 *Corner Smoothing（圆角平滑度）*，把图标、卡片、头像的圆角平滑度调到 iOS 推荐的 **0.6（60%）** 左右，整张界面立刻"贵"一档。这不是玄学——你在消除那条让杏仁核隐隐不适的曲率跳变缝。规则很简单：**大件（卡片、容器）用 squircle 提升质感，强调件（徽章、价签）可用 bevel 做宝石锐度，编辑型内容（证言、暖色系）用 scoop 做有机手感。形状本身就是视觉层级工具，不只是装饰。** **如果你是前端工程师**，2026 年是动手的好时机：用 `@supports (corner-shape: squircle)` 包一层渐进增强，给支持的浏览器升级成连续曲线，不支持的优雅回退。但生产环境暂时别全量押注——截至撰稿 Safari 和 Firefox 还没跟上，先在卡片、头像、按钮这类"锦上添花"的元素上灰度。同时把老的 SVG squircle 方案留着兜底，别删。 **如果你是做品牌的**，从小米事件里读出两条：第一，**"看不出来"不等于"没价值"**——连续曲线带来的下意识好感，是百万级预算才能换来的曲线授权；第二，**别为看不见的细节羞耻，要为它定价**。原研哉敢收 200 万，是因为他清楚自己在卖"让十亿人觉得顺眼的曲线"。 **对所有人的认知升级**：从此你看待世界的方式会变。你会开始注意——汽车 A 柱的曲面、咖啡杯把手、地铁闸机的导角、你家路由器的外壳——但凡"高级"的东西，边缘几乎都是连续曲线。**设计的高级感，不在 logo 多大、配色多潮，而在于它有没有消除那些让你杏仁核微微皱眉的"尖点"。** 一旦你看见了 squircle，就再也回不去圆角矩形了。 --- ## 延伸学习路径 1. **Superellipse（Wikipedia）** — 公式、Lamé 历史与 n 参数族的完整图解，建立数学直觉。 2. **Smashing Magazine (2026.03) · *Beyond border-radius: What The CSS corner-shape Property Unlocks*** — 五个实战 demo，手把手用 `corner-shape` 做 squircle / scoop / bevel。 3. **Bar & Neta (2006) · *Visual Elements of Subjective Preference Modulate Amygdala Activation***（Neuropsychologia）— 曲线偏好的神经科学原论文，fMRI 证据。 4. **The Squircle in Design（Max Monastyrev, Substack）** — squircle 在产品界面中的数学理论与应用综述，含 Figma/Webflow/CSS 实现。 5. **Piet Hein · Grooks（短诗集）与 Super Egg 资料汇编** — 读读这位"带计算尺的诗人"，理解 squircle 背后的人文底色——数学与诗意本是同源。 --- ## 一句话总结 > **你以为的圆角是四段圆弧硬焊出来的赝品，真正的"高级圆角"是一条活了 200 年的连续曲线——它让世界变软的全部秘密，都藏在那个你根本注意不到的角里。** --- ## 参考来源 1. [Why Every Apple Product Has the Same Rounded Corners](https://www.youtube.com/watch?v=SBO32oXP4L4) — 本期分析锚定的核心视频（YouTube 设计解说） 2. [The Superellipse, the curve between a square and a circle — fratak.com (2026.03)](https://fratak.com/the-superellipse-the-curve-between-a-square-and-a-circle) — superellipse 历史、Lamé 曲线、Sergels Torg、iOS 7 图标应用 3. [Beyond border-radius: What The CSS corner-shape Property Unlocks — Smashing Magazine (2026.03)](https://www.smashingmagazine.com/2026/03/beyond-border-radius-css-corner-shape-property-ui/) — 2026 年 `corner-shape` 属性深度评测与渐进增强方案 4. [Visual Elements of Subjective Preference Modulate Amygdala Activation — Bar & Neta, Neuropsychologia (2007)](https://pmc.ncbi.nlm.nih.gov/articles/PMC4024389/) — 尖角激活杏仁核、曲线偏好的 fMRI 证据 5. [The Squircle in Design: How Math Shapes Product Interfaces — Max Monastyrev (2025)](https://maxmonastyrev.substack.com/p/the-squircle-explained-mathematical) — squircle 数学设计理论综述 6. [Xiaomi 'Alive' 视觉系统重构 — 原研哉 / The Verge (2021)](https://www.theverge.com/tech/2021/3/30/22358033/xiaomi-new-logo-design-square-round) — 小米超椭圆 logo 改版事件 --- > 本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵**爱卫生**（微信ID: gprshome201101）维护，聚焦5G/6G核心网、3GPP标准解读、通信前沿技术深度分析。 > 出版作品有《5G核心网原理与实践》《IMS原理与实践》等4本通信专业书籍。知识星球「51学通信」提供深度技术答疑和行业洞察。 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。