用 border 属性即可添加边框，必须包含宽度、样式（如 solid）和颜色三值，缺一不可；单边边框用 border-top 等；表格应统一用 css 控制并设置 border-collapse: collapse；outline 是焦点轮廓，不影响布局，不可与 border 混淆。
HTML 元素怎么加边框？用 border 就够了
直接写 style="border: 1px solid #000;" 是最常用、兼容性最好、也最不容易出错的方式。CSS 的 border 属性本身是复合属性，能同时控制粗细、样式、颜色，不需要拆成三行写。
常见错误是只写 border-width 或只写 border-color，结果边框不显示——因为缺了 border-style（比如 solid、dashed），浏览器默认值是 none，等于没设。
-
border三个值缺一不可：宽度 + 样式 + 颜色（顺序可变，但样式不能省） - 想只加某一边？用
border-top、border-left等单边属性更安全 - 内联样式优先级高，适合快速调试；正式项目建议抽到 CSS 文件里，避免重复和维护困难
为什么 <table> 加 <code>border 不生效？
老式 HTML 表格常写 <table border="1">，这确实能出边框，但它属于过时的 HTML 属性，现代浏览器虽还支持，但行为不稳定：比如不会继承父容器的 box-sizing，也不响应 CSS 的 <code>border-collapse 控制。
更麻烦的是，这种写法会让每个单元格都自带边框，形成“双线”效果，而你真正想要的可能是外边框或合并边框。
立即学习“前端免费学习笔记（深入）”；
- 统一用 CSS 控制：
table { border-collapse: collapse; }+td, th { border: 1px solid #ccc; } - 如果保留
border="1"，记得在 CSS 里先重置：table[border] { border: none; }，再重新定义，否则容易冲突 -
border-collapse: separate（默认）会让相邻边框各自独立，间距由border-spacing控制；collapse才真正“合并”为一条线
outline 和 border 搞混了怎么办？
点击输入框或按钮时突然冒出一圈蓝线，那是 outline，不是 border。它专为键盘焦点设计，不影响布局，也不响应 border-radius，更不能单独设置某一边。
很多人想“去掉边框”却写了 border: none，结果蓝线还在——因为那是 outline，得单独处理。
- 移除焦点轮廓：
outline: none，但请慎用：会损害可访问性，至少配套加个:focus-visible或替换为其他视觉反馈 -
outline不占空间，border会改变元素宽高（除非用了box-sizing: border-box） - 想画虚线外框又不想影响布局？
outline是唯一选择；想精确控制圆角、阴影、内外距离？只能用border+padding+box-shadow
边框圆角、阴影、渐变这些进阶效果怎么加？
纯 border 只能画单色直线，要圆角就加 border-radius，要投影就加 box-shadow，要渐变边框就得绕道 background + mask 或伪元素——没有“渐变 border”这个原生属性。
最容易被忽略的是层级和渲染顺序：box-shadow 在 border 外层，border-radius 会影响 box-shadow 的形状，但不会影响 outline。
- 圆角边框：
border-radius: 4px，值越大越圆；四个角不同？写成border-radius: 4px 8px 4px 0 - 阴影边框：
box-shadow: 0 2px 4px rgba(0,0,0,0.1)，注意它不触发重排，性能比border稍好 - 渐变边框（伪元素方案）：
::after覆盖一层带background: linear-gradient(...)的绝对定位元素，再用mask或clip-path剪出边框形状
border-style 忘写、outline 和 border 混用、box-sizing 默认值导致尺寸错乱——这几个点，几乎每个前端都踩过两回。
