border="2"在HTML5中已废弃，因语义残缺且无法指定样式与颜色；现代浏览器忽略该属性或仅解析为border-width: 2px且默认border-style: none，故边框不显示。
border 属性在 <img alt="如何给图片添加指定厚度的边框_IMG标签BORDER属性应用" > 标签上写厚度值（比如 border="2"）已经无效——HTML5 明确废弃了该用法，现代浏览器即使解析它，也只当它是 border-width，且默认 border-style: none，所以边框根本不会显示。
为什么 border="2" 不起作用
HTML5 规范移除了 <img alt="如何给图片添加指定厚度的边框_IMG标签BORDER属性应用" > 的 border 属性。它原本只能传一个像素数字（如 border="0" 或 border="3"），无法指定样式（solid、dashed）和颜色，语义残缺、能力受限。
- 浏览器在严格模式（
）下会忽略该属性，或仅作兼容性回退处理 - 即使渲染出来，也等效于
border-width: 2px+border-style: none→ 实际无边框 - W3C 验证器会报错，构建工具（如 Vite、Webpack）可能直接过滤或警告
正确设置指定厚度边框：必须用 CSS border
CSS 的 border 是简写属性，**三个部分缺一不可**：宽度、样式、颜色。只写厚度（如 border: 2px）或漏掉样式（如 border: 2px #333）都不会生效。
- 合法写法示例：
border: 2px solid #333、border: 1em dashed rgb(102, 102, 102) - 厚度单位支持：
px（最常用）、em、rem、vh等；避免用%（不合法） - 样式关键字必须是：
solid、dashed、dotted、double（double要求宽度 ≥ 3px 才可见） - 颜色不能省略：即使想透明，也要写
transparent，border: 2px solid是无效声明
加边框后图片尺寸变大？检查盒模型
默认 box-sizing 是 content-box，所以 border: 2px solid #333 会让图片总宽高增加 4px（上下/左右各 2px）。若已设死 width 和 height（比如 width="200" height="150"），边框会撑出容器。
- 解决方法：加
box-sizing: border-box，让边框“向内缩”，保持设定尺寸不变 - 注意：HTML 属性
width/height和 CSSwidth/height行为不同；建议统一用 CSS 控制尺寸 + 边框 - 如果图片是
display: inline（默认），某些旧版 Safari 下border-radius可能不生效；显式加display: block或inline-block更稳妥
要不要用 outline 替代 border？
outline 不参与布局计算，适合纯视觉强调（比如焦点状态、hover 描边），但它有硬限制：
-
outline不支持圆角（border-radius对它无效） - 不能分方向设置（没有
outline-top这种东西） - 不支持
inset、groove等样式，只有solid、dashed、dotted - 若你真需要「厚度可控 + 不占布局空间」，
outline是备选；但常规边框，请坚持用border+box-sizing
最容易被忽略的点：不是“写了 border 就一定有边框”，而是“没写 border-style 就等于没开开关”。哪怕厚度和颜色都对，漏掉 solid 这类关键字，边框就隐形了——这不是 bug，是 CSS 规范本身的设计逻辑。
