---
title: G2 连续曲率与超椭圆几何
description: 为什么标准 border-radius 圆弧倒角在高端界面中显得生硬？从 G0/G1 到 G2 曲率连续性推导与 Apple 平滑圆角实现。
---

# G2 连续曲率与超椭圆几何

在高级工业制造（如汽车流线外壳）和现代高端操作系统界面（如 Apple macOS / iOS）中，曲率的连续性直接决定了光影反射的柔和度。

## 几何连续性阶数定义

几何连续性决定了两条曲线连接处的光滑程度：

- **$G^0$ 连续（位置连续）**：两段曲线在端点重合，但切线方向发生突变（90 度直角）。
- **$G^1$ 连续（切线连续）**：两段曲线在连接点处切线方向相同，一阶导数连续。CSS 标准的 `border-radius` 就是典型的 $G^1$ 连续（直线与圆弧相切）。
- **$G^2$ 连续（曲率连续）**：两段曲线在连接点处曲率 $\kappa$ 保持完全相等，二阶导数连续。

## 为什么标准圆弧倒角存在视觉断裂？

对于标准圆弧倒角：
- 直线段曲率 $\kappa = 0$。
- 进入圆弧瞬间，曲率突跃为 $\kappa = \frac{1}{R}$。
由于二阶导数的阶跃，人眼在光照或者折射材质下会敏锐察觉到连接处的“折痕感”（Specular Break）。

## 超椭圆方程与 Apple 平滑圆角

Apple 从 iOS 7 起把应用图标换成「连续圆角」，这种外形常被近似为超椭圆（Lamé 曲线）：
$$\left| \frac{x}{a} \right|^n + \left| \frac{y}{b} \right|^n = 1 \quad (n \approx 4 \sim 5)$$
$n > 2$ 时，超椭圆与直线相接处的曲率为 0，曲率接得上（$G^2$）；$n > 3$ 时，那里的曲率变化率也为 0，曲率从 0 平缓爬升到 45° 方向的峰值。

:::TuffDemoWrapper{demo="ConceptCurvatureCombDemo"}
:::

## TuffEx 的工程实现方案

TuffEx 用 CSS `corner-shape` 画超椭圆圆角：`border-radius` 决定拐角占多大，`superellipse(K)` 的指数 $n = 2^K$。`tx-squircle` 把圆角放大到 $(1 + s) \cdot R$，再取让 45° 方向切入深度与半径 R 的圆弧相同的指数。默认 $s = 0.6$，得到 $1.6R$ 与 `superellipse(1.777)`（$n \approx 3.43$）：

:::TuffCodeBlock{lang="scss"}
---
code: |
  // packages/tuffex/packages/components/style/mixins.scss
  @mixin tx-squircle($radius: 16px, $smoothness: $tx-squircle-smoothness, $inset: 0) {
    border-radius: tx-squircle-inset($radius, $inset);
    @supports (corner-shape: superellipse(2)) {
      border-radius: tx-squircle-inset(tx-squircle-radius($radius, $smoothness), $inset);
      corner-shape: superellipse(#{tx-squircle-exponent($smoothness)});
    }
  }
---
:::

- **回退**：不支持 `corner-shape` 的浏览器（Safari、Firefox）保留普通圆角。TuffEx 不用 SVG 遮罩补形：遮罩会剪掉外侧阴影，还让内部的 `backdrop-filter` 取不到背景，默认的琉光材质会失效。
- **令牌与工具类**：拿不到 mixin 的代码读 `--tx-corner-smooth-scale` 与 `--tx-corner-smooth-shape`；模板里用 `.tx-corner-smooth-sm`、`-md`、`-lg`（8 / 16 / 24px）。
- **子层**：用 `border-radius: inherit` 复制外形的子层要同时写 `corner-shape: inherit`，这个属性不会继承。在边框或内边距以内的子层不能直接继承，要给 `tx-squircle` 传 `$inset`，半径减去这段距离，才与宿主同心。

TxCard、TxModal、TxCommandPalette、TxFlipOverlay 与各类 Dialog 已用上平滑圆角，CoreBox 在「圆角」外观下也是，琉光折射的边缘沿着同一条连续曲线走。