跳到正文
UIGrammer
EN 中文

反模式 · 厚度 ·

边框只为加深厚度

只为厚度存在的边框指表面上已有阴影还叠发丝线,两套机制干同一个分隔的活。

症状

卡片或面板同时有可见的 1px 边框和 box-shadow。

为什么会这样

模型会把所有已知的分隔手法叠加起来,以确保元素「跳出来」。这种叠加也是让表面看起来像 2014 年 bootstrap 卡片的最快方式。

规则

每个表面只用一种分隔机制:发丝边框或阴影,绝不两者都用。

  1. 按组件族决定:密集产品界面用边框,分层内容用阴影。
  2. 保留阴影的话,用低透明度的双层值,不要大模糊。
  3. 深色表面上优先用浅色发丝边框,阴影在深色上几乎看不出来。

边框只为加深厚度是什么?

一张卡片既有 1px 边框又带投影,是冗余的:两者存在的目的都是把这个表面与背后分开。更糟的是叠加会把边缘弄脏——边框看起来像道缝而不是轮廓。二选一。边框适合扁平、密集的产品界面,阴影适合有层次的内容型布局。

修复 Prompt

贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。