border属性在现代html中已失效，它仅作为过时的“开关式”呈现提示存在，不支持像素级控制、颜色或样式定制，实际边框必须用css的border-width、border-style和border-color三要素协同设置。
border 属性在现代 HTML 中已失效，不能用来控制边框粗细。浏览器（Chrome 120+、Edge 122+）基本忽略 border="3" 这类写法，或统一当 border="1" 处理。
为什么直接写 border 属性没用？
HTML 的 border 属性是早期用于“开关式”控制——有值就显示默认粗细的边框，没值就不显示。它不接受单位、不支持颜色和样式，更无法指定像素级粗细。HTML5 规范已将其标记为“过时（obsolete）”，仅保留向后兼容，实际渲染权完全交由 CSS 掌控。
常见错误现象：<table border="2"> 在开发者工具里看到 computed 样式中 <code>border-top-width 仍是 0px 或 1px，说明该属性未被采纳。
border-width 单独设无效？先检查这三个条件
只写 border-width: 3px 而边框不出现，大概率不是语法错，而是以下任一条件缺失：
- 没设
border-style（默认是none，等于没边框） - 没设
border-color（透明或未声明时，部分浏览器不渲染） - 父容器或自身有
overflow: hidden，且边框因负 margin 等方式溢出被裁剪
最省事的验证方式：临时换成 border: 3px solid currentColor，如果立刻出现，说明原写法漏了 style 或 color。
表格外框加粗必须单独控制 td/th 边界，而非只靠 table
表格结构复杂时（比如带 rowspan、colspan 或嵌套表头），table 元素自身的 border 很难覆盖所有外沿。真正起效的是对单元格边界的定向控制：
- 左外边框加粗：
th:first-child, td:first-child { border-left-width: 3px; } - 右外边框加粗：
th:last-child, td:last-child { border-right-width: 3px; } - 底部外边框加粗：
tr:last-child td { border-bottom-width: 3px; } - 顶部外边框加粗：
tr:first-child th, tr:first-child td { border-top-width: 3px; }
注意：这些规则必须建立在 border-style 已设为 solid 等可见样式的基础上；若用了 border-collapse: collapse，还要确保相邻单元格的对应边没有更细的边框“覆盖”掉你的加粗设置。
响应式场景下避免硬写 px，优先用 clamp() 或 box-shadow
固定写 border-width: 2px 在高 DPI 屏幕（如 Retina、Windows 缩放 125%）上可能过粗，在小屏上又显得模糊。更稳妥的做法：
- 用
clamp(1px, 0.1vw, 2px)让边框随视口缩放自适应 - 用
box-shadow: 0 0 0 0.5px #000模拟亚像素边框，兼容性比0.5px更好 - 慎用
thin/medium/thick关键字——它们在不同浏览器/版本中映射的像素值不一致（例如 Chrome 可能是 1/3/5px，Safari 可能是 1/2.5/4px）
真正容易被忽略的点：边框是否“看起来粗”，不仅取决于 border-width，还受 border-collapse 模式、相邻单元格边框权重、以及字体渲染反锯齿影响。调试时别只盯着一个元素的声明，要切换到 DevTools 的 Computed 面板，逐项核对 border-top-style、border-top-color、border-top-width 三项是否全部生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
