现代HTML中img的border属性已废弃，CSS border虽有效但影响布局；outline无布局干扰但不支持圆角；最佳实践是用容器padding+background模拟边框，并注意vertical-align和深色模式适配。
img 标签的 border 属性在现代 HTML 中已失效
直接写 border="1" 或用 border css 属性老式写法（如 border: 1px solid #000）确实能出边框，但问题不在“能不能”，而在“靠不靠得住”——border 会干扰图片默认的内联布局行为，尤其在 flex/grid 容器里容易撑开空白、错位，甚至触发意外的 margin 折叠。
- HTML4 时代的
border属性（如<img src="x.jpg" border="2">）在 HTML5 中已废弃，部分浏览器仍兼容，但 W3C 不保证未来支持 - CSS 的
border本身有效，但会增加元素总尺寸（除非启用了box-sizing: border-box），而<img>默认是content-box - 移动端 Safari 对
border-radius+border组合渲染有偶发锯齿，尤其在 Retina 屏上
用 outline 替代 border 实现无布局偏移的边框
outline 不占布局空间、不触发重排，适合做纯视觉提示（比如焦点态、调试边框），且跨平台渲染一致。但它不能设置圆角、也不能分方向控制（只能四边统一）。
- 适用场景：图片 hover 高亮、键盘聚焦反馈、开发时快速标出图片边界
- 写法示例：
img { outline: 2px solid #007bff; outline-offset: 2px; }——outline-offset控制离图片边缘的距离，避免贴边压抑 - 注意：
outline在打印样式表中默认不显示，如需打印边框，必须显式加@media print { outline: ... }
真正响应式边框要靠 padding + background 模拟
当需要边框随缩放变化、支持圆角、适配深色模式、或保持宽高比不被破坏时，border 和 outline 都不够用。稳妥做法是把 <img> 包进一层容器，用容器的 padding 和 background “画”出边框。
- HTML 结构：
<div class="img-border"><img src="x.jpg" alt=""></div> - CSS 示例：
.img-border { padding: 3px; background: #e0e0e0; display: inline-block; }—— 这样边框宽度随视口缩放自动等比，且不影响图片 intrinsic 尺寸 - 兼容性：所有现代浏览器都支持，IE11 也 OK；若需透明边框，改用
background: linear-gradient(...)或伪元素
深色模式下边框颜色别硬编码
写死 border-color: #ccc 在深色背景上会看不见。CSS 原生方案是用 color-scheme 配合 prefers-color-scheme，但更轻量的做法是直接依赖系统语义色。
- 推荐写法：
border-color: CanvasText;或border-color: ButtonFace;—— 这些是 CSS 系统颜色关键字，会随系统主题自动切换 - 验证方式：在 macOS 系统设置 → 通用 → 外观 切换明暗模式，刷新页面看边框是否可读
- 注意：
CanvasText在深色模式下是浅灰，但某些 Linux 桌面环境可能未正确定义，建议 fallback：border-color: CanvasText, #666;
vertical-align —— 图片默认 baseline 对齐，加上边框后容易和文字错位，哪怕只差 1px，也会让整行布局发飘。加一句 vertical-align: middle; 或 top 就能稳住。 
