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° 方向的峰值。

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$）：

// 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 在「圆角」外观下也是，琉光折射的边缘沿着同一条连续曲线走。