Double-Bezel 嵌套卡片架构

概述

一种通过 外壳 (Outer Shell) + 内核 (Inner Core) 两层嵌套模拟精密边框的卡片构建技术。

其核心特征是：

• 外壳是半透明的”边框层”，内核是实际内容区域，两者精确嵌套；
• 内核圆角通过 calc(外壳圆角 - 外壳 padding) 计算，确保边框宽度在圆角处均匀一致；
• 内核使用 inset box-shadow 模拟顶部光照反射，产生”浮雕”质感；
• 适用于 Card、Input、Textarea、Dialog 等多种组件，外壳颜色随背景和状态变化。

核心思路

每个卡片/输入框由外壳 (Outer Shell) + 内核 (Inner Core) 两层嵌套组成。外壳是半透明的”边框层”，内核是实际内容区域。两者之间通过精确的 padding 和 border-radius 计算保持均匀的 3px 间距。

Card 实现

// 外壳 — 暗色半透明边框层
<div className="p-1.5 rounded-[2rem] bg-black/[0.03] ring-1 ring-black/[0.05]">
  {/* 内核 — 白色内容区，带顶部高光 */}
  <div className="rounded-[calc(2rem-0.375rem)] bg-card
                  shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]">
    {children}
  </div>
</div>

圆角计算公式

内核圆角 = 外壳圆角 - 外壳 padding

组件外壳 padding外壳圆角内核圆角Card0.375rem (6px)2remcalc(2rem - 0.375rem)Input3px1.25remcalc(1.25rem - 3px)Dialog0.375rem (6px)2remcalc(2rem - 0.375rem)Project Card3px1remcalc(1rem - 3px)

目的：确保内核边缘与外壳之间保持均匀的边框宽度，在圆角处尤其明显。

外壳变体

场景外壳背景外壳边框浅色背景上的 Cardbg-black/[0.03]ring-black/[0.05]浅色背景上的 Inputbg-black/[0.03]ring-black/[0.06]毛玻璃上的 Dialogbg-white/[0.12]ring-white/[0.15]Focus 状态的 Inputbg-primary/[0.04]ring-primary/[0.15]

规律：深色背景叠亮边框，浅色背景叠暗边框。

内核高光

内核使用 inset box-shadow 模拟顶部光照反射：

/* 单层高光（Card） */
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]

/* 双层高光 + 暗部（Input） */
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),inset_0_1px_2px_rgba(0,0,0,0.04)]

第一层是顶部白色高光，第二层是底部微暗阴影，两者叠加产生”浮雕”质感。

Focus 状态增强（Input）

/* 外壳变色 */
group-focus-within:bg-primary/[0.04]
group-focus-within:ring-primary/[0.15]

/* 内核发光 */
focus:shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_0_0_3px_hsl(var(--primary)/0.08)]

通过 group-focus-within 让父级外壳响应子元素 focus，实现”边框变色 + 内部柔光”的联动效果。

适用场景

• 需要”精致边框”感的卡片、输入框、弹窗
• 替代普通的 border + border-radius 方案
• 在毛玻璃背景上需要白色半透明边框的浮层

‍