CSS中需用border-top等方向属性独立设边框，简写border会覆盖所有边；单边声明必须含style，否则为none；可用border-width等复合属性按TRBL顺序赋值；表格中用border-collapse:separate避免边框合并；outline和box-shadow可模拟伪单边效果但有局限。
border-top / border-right / border-bottom / border-left 分开设置
HTML5 本身不提供新边框语法，真正起作用的是 CSS。要给元素不同方向设置独立边框，必须用四个方向专用属性，而不是只写 border 简写——后者会覆盖所有边。
常见错误是以为 border: 1px solid red; 后还能单独加 border-right: 2px dashed blue; 却发现右边没变：因为简写声明已设定了所有边的 width、style、color，后续单边声明若缺参数（比如没写 style），浏览器会按初始值 none 处理，导致“消失”。
-
border-top控制上边，可设width、style、color，例如border-top: 3px dotted #007bff; -
border-right必须显式声明style，否则即使写了border-right: 2px #ff6b6b;也无效（缺少style→ 默认为none） - 四个方向可混用单位：左边用
px，右边用em，下边用rem，完全合法
用 border-width / border-style / border-color 按方向分别赋值
当只需改粗细、样式或颜色中某一项时，用 border-width 这类复合属性更高效，它支持按顺时针顺序传 1–4 个值，对应上右下左（TRBL）。
例如：border-width: 1px 2px 0 3px; 表示上=1px、右=2px、下=0、左=3px；border-style: solid dashed none dotted; 同理。这种写法比重复写四次 border-top-style 等更紧凑。
立即学习“前端免费学习笔记（深入）”；
- 只给一个值（如
border-color: #333;）→ 四边同色 - 两个值（
border-color: #f00 #00f;）→ 上下=#f00，左右=#00f - 三个值（
border-color: #f00 #00f #0f0;）→ 上=#f00，左右=#00f，下=#0f0 - 四个值（
border-color: #f00 #00f #0f0 #000;）→ TRBL 顺序
避免 border-collapse 影响表格边框方向控制
在 <table> 中设置不同方向边框时，border-collapse: collapse; 会让相邻单元格边框合并，此时 border-right 和 border-left 可能被“抵消”，实际只显示较宽/较重的那个。想精确控制每边，必须用 border-collapse: separate; 并配合 border-spacing。
table {
border-collapse: separate;
border-spacing: 0;
}
td:first-child {
border-right: 2px solid #e0e0e0;
}
td:last-child {
border-left: 1px dashed #999;
}
注意：即使设了 border-spacing: 0，separate 模式下各边仍是独立渲染的，不会像 collapse 那样强制统一。
用 outline + box-shadow 模拟“伪边框方向”
当需要“仅某一边有视觉边框但不占布局空间”时，border 会改变元素尺寸（触发重排），这时可用 outline 或 box-shadow 替代。但要注意限制：
-
outline不支持单边，只能全向，且无法圆角；outline-offset可微调距离 -
box-shadow可模拟单边效果，例如box-shadow: 3px 0 0 0 #ff6b6b;（右偏移3px，无模糊、无扩散） - 这类方案本质是“画出来”的，不是真实边框，无法被
border-radius圆角裁剪（除非配合overflow: hidden）
真正需要响应鼠标事件（如 hover 边框变色）或影响盒模型时，还是得回到 border-* 系列属性——绕不开的细节是：每个方向的 style 必须明确，否则等于没设。
