在 Figma 中选择描边还是阴影

在 Figma 里，Stroke、Drop shadow 和 Inner shadow 都能画出边缘，但在 CSS 中的行为并不一样。

Border 与 Stroke

Figma 的 Stroke 可以放在图形内部、中心或外部，CSS border 没有这组位置选项。

使用 content-box 时，1px border 会增加最终尺寸。使用 border-box 时，border 留在声明尺寸内，同时会压缩内部空间。box model 不一致，间距就可能差一两个像素。

边界本身有含义时，用 border。交付时要写清 border 宽度和 box model。

Drop shadow

Drop shadow 不改变布局尺寸，适合表达卡片 hover 时的抬升。

如果父级使用 overflow: hidden，阴影可能被裁掉。Blur 也会让边缘不如 border 准确。

Inner shadow

Inner shadow 留在表面内部，不改变外部尺寸，也不会被父级裁掉。

外部尺寸必须准确时可以用它。但它只是视觉边缘，不能代替清楚的 focus 状态或真正的边界。

一个实用的默认选择

1. 结构边界 → Border
使用 1px border，并配合 border-box。这是最清楚的默认方案。

2. 外部尺寸固定或父级会裁剪 → Inner shadow
边缘必须留在组件内部时，用 inner shadow。

3. 层级或 hover 反馈 → Drop shadow
用 drop shadow 表达深度，同时检查父级是否裁剪。不要只靠阴影定义边界。