边框必须显式声明宽度、样式、颜色三值，统一用1px solid #e0e0e0等中性灰系；通过CSS自定义属性集中管理，禁用outline改用box-shadow聚焦态，border-radius须与边框宽度匹配。
边框宽度、样式、颜色必须写全三值
很多人写 border: 1px solid; 或 border: #ccc;，浏览器会把缺省值补成 border: 1px solid currentColor，但 currentColor 依赖上下文，容易在按钮、链接、表单里意外变色。更糟的是，某些老版本 Safari 对缺省 border-style 解析不一致，导致边框“时有时无”。
统一规范只认一种写法：
border: 1px solid #e0e0e0;。所有地方都显式声明三要素：宽度、样式、颜色。不接受缩写缺省，不依赖继承。
- 宽度固定用
1px（高清屏下可用1px配合transform: scaleY(0.5)模拟 0.5px，但初级项目先不引入） - 样式只用
solid，禁用dashed/dotted/double—— 它们语义弱、视觉干扰强、打印时易出错 - 颜色统一走中性灰系：
#f5f5f5（浅灰，用于卡片/分隔）、#e0e0e0（标准灰，用于输入框/按钮边框）、#bdbdbd（深灰，仅用于禁用态）
用 CSS 自定义属性集中管理边框变量
硬编码颜色值会导致改一个边框色要搜全项目改十几处。直接在 :root 里定义边框变量，所有组件复用同一套语义命名：
:root {
--border-light: #f5f5f5;
--border-default: #e0e0e0;
--border-disabled: #bdbdbd;
--border-width: 1px;
}
.card {
border: var(--border-width) solid var(--border-light);
}
input,
button {
border: var(--border-width) solid var(--border-default);
}
input:disabled {
border-color: var(--border-disabled);
}
这样改主题色时，只需动三行变量值，不用碰任何组件样式。注意：不要把 border 整体塞进变量（如 --border: 1px solid #e0e0e0），否则无法单独覆盖颜色或宽度。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
避免 outline 和 border 混用造成视觉重叠
很多新手给 button:focus 加 outline，又同时写了 border，结果聚焦时出现双线——尤其在 Chrome 中默认 outline 是蓝色虚线，和灰色实线并存非常刺眼。
统一做法：禁用所有 outline，改用 box-shadow 模拟聚焦态：
- 移除全局
*:focus { outline: none; }（太暴力，影响可访问性） - 只对有交互的元素（
button、input、a[role="button"]）设置：&:focus { outline: none; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3); } - 这个蓝色阴影是 Material Design 推荐色，透明度
0.3确保不遮挡原有边框
圆角边框必须和边框宽度联动
写 border-radius: 4px; + border: 2px solid #e0e0e0 会导致圆角被边框“撑开”，视觉上角部比直线段更粗。初级项目建议严格匹配：
-
border-width: 1px→border-radius: 4px -
border-width: 2px→border-radius: 6px（但初级项目尽量避免 2px 边框） - 所有卡片、模态框、输入框统一用
border-radius: 4px，不出现2px、8px这类孤立值
如果某处需要“直角”，别写 border-radius: 0，而是统一用变量：--border-radius-none: 0;，保持命名体系完整。真正难处理的是带 border-image 或 clip-path 的边框——初级项目先绕开，它们不属于“统一规范”能解决的范畴。
