反模式 · 厚度 · 低
边框只为加深厚度
只为厚度存在的边框指表面上已有阴影还叠发丝线,两套机制干同一个分隔的活。
症状
卡片或面板同时有可见的 1px 边框和 box-shadow。
为什么会这样
模型会把所有已知的分隔手法叠加起来,以确保元素「跳出来」。这种叠加也是让表面看起来像 2014 年 bootstrap 卡片的最快方式。
规则
每个表面只用一种分隔机制:发丝边框或阴影,绝不两者都用。
- 按组件族决定:密集产品界面用边框,分层内容用阴影。
- 保留阴影的话,用低透明度的双层值,不要大模糊。
- 深色表面上优先用浅色发丝边框,阴影在深色上几乎看不出来。
边框只为加深厚度是什么?
一张卡片既有 1px 边框又带投影,是冗余的:两者存在的目的都是把这个表面与背后分开。更糟的是叠加会把边缘弄脏——边框看起来像道缝而不是轮廓。二选一。边框适合扁平、密集的产品界面,阴影适合有层次的内容型布局。
修复 Prompt
贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。