CSS 的 border-radius 是个美丽的误会

它画的是「圆弧 + 直边」，切点处曲率从 1/r 瞬间跳到 0——肉眼能看出角上那个鼓包。苹果图标那种丝滑，靠的是 G2 连续曲率：整条轮廓曲率平滑过渡，没有断点。<g2-corner> 一行标签，把这种形状套到任意内容上。

G1 · border-radius

直线(曲率0) 突然接圆弧(曲率1/r)
切点处曲率跳变 → 角上有折

G2 · <g2-corner>

整条轮廓都是同一条连续曲线
曲率平滑过渡 → 顺滑无折

一、亲手调，看它怎么变

左边 G2，右边普通 CSS——尺寸、填充、描边、内边距完全同步，你只改一个变量：曲率连续性。拖 n，两边一起从椭圆滑到方。

G2 · <g2-corner>

示例卡片
实时同步

CSS · border-radius

示例卡片
实时同步

n · 方度：2=椭圆 → 越大越方5 width200 height200

stroke-width3 stroke 颜色 #007aff

fill 颜色 #1c1c20 padding 内边距20

blur 毛玻璃 · 0=关0 gradient 渐变（如 135,#ff9f0a,#ff375f）

毛玻璃需背后有内容才显形；gradient 空则回退纯色。

|x / a|^5.0 + |y / b|^5.0 = 1

超椭圆（Lamé 曲线）· a = 100，b = 100，指数 5.0 控制方度：2=椭圆 → 越大越方

一个零依赖的「任意内容 G2 形状壳」。下面按用途分三类，证明它不挑食。

头像底（n=4）

按钮

按钮（n=6 偏方）

卡片容器
slot 装任意 HTML

卡片（n=5）

富 HTML 卡片

图标、标题、正文、标签，全部塞在 slot 里。

任意 HTML

富 HTML 内容

纯描边装饰（n=8）

padding=0 铺满

传张图
或写点字

n · 方度：2=椭圆 → 越大越方5 文字（会浮在图片上）图片选择图片

图片只存在你的浏览器本地，不会上传任何服务器。

渐变填充卡

gradient 属性

毛玻璃卡
背后被模糊成雾面

blur 属性（需背后有内容）

同一尺寸，n 从 2 到 10。这就是「自由度」不是嘴上说的——一条属性吃完整条曲线谱系。