borders值得吗？设计清单

2026-07-20

borders值得吗？答案不是“加了更精致”这么简单。边框用得好，能让界面、表格、卡片更清楚；用得多，页面会立刻变吵。下面按真实使用问题来盘一遍，帮你判断什么时候该加，什么时候该删。

Q1：页面卡片加 borders 值得吗？

值得，但前提是背景和卡片对比不够。比如后台系统常见的浅灰背景上放白卡片，一条 1px 的 #E5E7EB 边框，比重阴影更干净，也更适合信息密集页面。

如果你的卡片已经有明显阴影，再加深色 border，多半会显得脏。卡片只需要一种分层手段：要么阴影，要么浅边框，要么靠背景色差。三种一起上，很容易像十年前的管理系统。

次级按钮很值得。主按钮靠填充色表达优先级，次级按钮用透明背景加边框，用户一眼能分出轻重。常见组合是主按钮实心蓝，次按钮白底蓝边，取消按钮灰字无边框。

别给所有按钮都加同样粗的边。你会发现页面像摆了一排盒子，视线没有落点。边框在按钮里是“等级语言”，不是装饰线。

会员专享，海量内容

多数情况下不值。全边框适合打印清单、财务明细、考试表格，因为它们需要逐格核对。网页表格更适合轻量分隔：只保留横线、标题行加底色、悬停行高亮。

我做后台页时有个土办法：先把所有竖线删掉，如果还能读清楚，就别加回去。竖线少一半，表格通常立刻显得高级。

值得，但别太淡。手机屏幕亮度、贴膜、户外光都会吃掉浅灰线。输入框如果只用 #F3F4F6 这种极浅边框，用户可能看不出哪里能点。

更稳的做法是默认浅灰边框，聚焦时换成品牌色或加 2px 高亮。错误状态不要只改红色边框，最好配错误文案；色弱用户不能只靠颜色识别。

内容已经靠留白分组时，不值得；信息层级已经靠字号和颜色解决时，不值得；页面元素很多、每块都想框起来时，更不值得。边框越多，用户越看不见重点。

判断方法很简单：截图转成灰度，如果满屏都是线，说明 borders 抢戏了。删到只剩关键分隔线，界面往往更耐看。

加入会员，海量资源任你看

值得，但要克制。极简页面常用 1px 浅灰线做分隔，颜色建议接近背景但仍可辨认，例如 #E5E7EB、#DADDE3 这类中性灰。

信息密集页面优先边框，干净、省空间；营销落地页或需要浮层感的卡片，可以用阴影。两者不是不能同用，但要有主次。

普通 CSS border 对性能影响很小。真正要小心的是大量复杂阴影、动画边框、渐变描边，这些比普通边框更可能带来渲染压力。