用 border 属性可直接为任意 HTML 元素添加边框，但需注意颜色不可省略、input 需重置默认样式；border 是 width/style/color 的简写；单边控制用 border-top 等；圆角需配合 border-radius；语义化带标题边框应使用 fieldset/legend；禁用边框用 border: none 而非删除标签；避免用 table/hr/outlines 模拟边框；box-shadow 仅模拟不可替代 border；性能问题多见于 border-image 或动画 color；兼容性上 IE8 不支持 border-radius，深色模式推荐用 currentColor 或 CSS 变量。
用 border 属性给任意 HTML 元素加边框最直接
几乎所有块级和行内元素（如 常见错误是只写 如果目标是“一个带标题的框”，比如表单分组或设置区块，别用 注意：默认样式各浏览器略有差异， 立即学习“前端免费学习笔记（深入）”； 有人用 更隐蔽的问题是：用 绝大多数边框毫无性能负担，但以下情况例外：大量元素同时使用 IE8 及更早版本不支持 、）都能通过 CSS 的 border 添加边框，无需额外标签。关键不是“怎么加”，而是“加在哪”和“加成什么样”。
border: 1px solid;——漏掉颜色，浏览器会默认用当前文字色，但容易误以为没生效；或者在 上加了边框却忘了清除浏览器默认样式，导致双线重叠。
border 是简写，等价于 border-width border-style border-color，三者缺一不可（颜色可省略，但有风险）border-top、border-left 等单独控制border-radius，且它不影响边框本身，只影响绘制形状div.example {
border: 2px dashed #333;
border-radius: 4px;
}
和 是语义化“带标题边框”的唯一原生方案border 硬套。HTML 原生提供了语义准确、无障碍友好的组合： 自带边框， 会自动嵌入边框顶部作为标题。
的定位行为（如居中偏移）不能靠 text-align 改变，得用 legend { margin: auto; } 或 flex 微调。
border: none 在 上即可，但别删标签——否则语义丢失 在左侧？需配合 float: left 或 display: flex，纯 CSS 无通用一行解 的老 IE（如 IE8）会忽略 border-radius，但边框本身仍显示避免用
或
或在内容前后塞两个
outline 替代 border（比如为了“不占布局空间”），结果发现焦点状态干扰正常边框，或打印时 outline 默认不输出。
outline 不参与文档流，不会触发父容器重新计算高度，但也不该用于常规边框box-shadow: 0 0 0 1px #000 可模拟边框，但它是“阴影”，不是边框——不响应 border-radius 的内圆角，且可能被其他元素遮挡边框性能与兼容性要注意的点
border-image（尤其含 SVG 或渐变），或在移动端对滚动区域内的元素频繁动画 border-color（触发布局重排）。border-radius 和 border-collapse: separate 的某些值；Android 4.3 及以下 WebView 对 border-style: groove 渲染异常。
边框看着简单，真正难的是在语义、可访问性、响应式和老环境之间找平衡点——比如一个按钮的边框，在高对比度模式下是否足够清晰，焦点状态是否和普通状态区分明确，这些比“怎么加”重要得多。border: 1px solid #ccc 最稳妥，避免 double、ridge 等样式border-color: currentColor 或 CSS 变量配合 @media (prefers-color-scheme: dark)
border-box 盒模型前确认父容器没有意外的 padding 挤压边框显示位置
