多色径向渐变 + 多层 inset box-shadow 模拟玻璃质感与立体光照的容器。默认启用 CSS Borders Level 4 的 corner-shape: squircle 实现苹果平滑圆角，在不支持的浏览器（Safari / Firefox / 旧 Chrome）会自动降级为普通 border-radius。
Activity 卡 + Bottom Panel
启用 hover prop · 主光源渐变增亮（鼠标移上去查看）
Pink · Top
hover · glow
Cyan · Top
hover · glow
Emerald · Bottom
hover · glow
默认状态 · 无 hover 反馈
主光源渐变 alpha × 1.7 · 500ms ease-out 渐入
CSS Borders Level 4 — squircle 与其他角型对比（不支持浏览器降级为 round）
Round
border-radius: 48px
传统圆角 · 跨浏览器一致
Squircle
corner-shape: squircle
Chromium 139+ · Safari / Firefox 当前自动降级为 round
8 种色调 × top / bottom
同 tone 的顶部光源 vs 底部光源
Top Origin
光源在顶部 · 顶部柔光 + 底部硬边
Bottom Origin
光源在底部 · 顶部暗压 + 底部柔光
从规整方角到 Apple Squircle
实时改 tone / origin / radius / cornerShape / 主光源色
Live Preview
tone=pink · origin=top · radius=48px
cornerShape=squircle
hover=false
开启后悬停 Live Preview · 主光源渐变增亮
n=2 等价 squircle · n=1 菱形 · n→∞ 趋近方形 · 不支持浏览器自动降级