用 border 简写最可靠：border: 1px solid #000；批量操作优先用 CSS 类（如 .border-solid）或属性选择器统一控制，避免内联样式；outline 和 box-shadow 不替代 border，因布局、渲染及兼容性问题。
直接用 border 设置实线边框最可靠，批量操作优先走 CSS 类选择器，别用内联样式硬写。
怎么用 border 写单个元素的实线边框
实线边框的核心是 border-style: solid，但实际开发中几乎没人单独写它——因为 border 简写属性一步到位：
-
border: 1px solid #000：1 像素宽、实线、黑色（最常用） -
border: 2px solid rgba(0,0,0,0.5)：支持透明度 -
border: 3px solid currentColor：继承父级文字颜色，适合主题切换场景
注意：border 简写会重置 border-width、border-style、border-color 三者，漏写某项可能意外清空原有值。比如只写 border: solid #f00，宽度会退回到浏览器默认（通常是 3px），不可控。
批量加实线边框：用类名统一控制最稳妥
给多个元素加相同边框，绝不要一个个写 style="border: ..."。正确做法是抽离成 CSS 类：
立即学习“前端免费学习笔记（深入）”；
.border-solid {
border: 1px solid #ddd;
}
然后在 HTML 中复用：
卡片提示文字
这样改边框只需动一处 CSS，也方便后续加响应式（比如 @media (max-width: 768px) { .border-solid { border-width: 0.5px; } }）。如果元素语义明确（如表单控件），更推荐用属性选择器批量命中：
input, select, textarea { border: 1px solid #ccc; }-
[role="alert"] { border-left: 4px solid #e53e3e; }（左竖条强调）
为什么不用 outline 或 box-shadow 代替 border
有人想“模拟”边框，结果掉坑里：
-
outline不占布局空间，且无法单独设置某一边，outline: 1px solid red会绕整个元素一圈，还可能被focus干扰 -
box-shadow: 0 0 0 1px #000看似能当边框，但它是绘制在元素上方的图层，z-index 高于内容，可能遮挡文字或背景渐变；缩放时像素模糊，打印时也可能不显示
只有真正需要“非布局边框”（比如调试时高亮元素）才考虑它们。日常边框，请老老实实用 border。
兼容性与细节陷阱
HTML5 本身不提供边框能力，全靠 CSS。但要注意几个老问题：
- IE8 及以下不支持
rgba()和hsl()边框色，要用#hex或预设颜色名 -
border-radius和border共存时，圆角会裁剪边框，但这是预期行为；若要“圆角+内边距+边框”都精准，记得检查box-sizing: border-box是否生效 - 表格单元格（
td）默认有border-collapse: collapse，此时border表现和普通块元素不同，需显式设border-collapse: separate才能保证每格独立边框
边框看着简单，但批量控制时，类名命名是否语义化、是否预留了响应式钩子、是否和现有 UI 框架的 border 规则冲突——这些才是真正耗时间的地方。
