最稳妥的细线边框方案是直接用 border: 1px solid #e0e0e0；html5 已废弃 img 的 border 属性，必须用 css 设置；border 三参数缺一不可，推荐 display: block、box-sizing: border-box 避免布局陷阱；单侧边框更现代，禁用 outline 和复杂阴影。
直接用 border 加 1px solid #e0e0e0 就是最稳妥的细线边框方案，别碰 outline 或模拟 0.5px，容易出兼容和聚焦干扰问题。
为什么不能用 img border="1" 这种写法
HTML5 已废弃所有 border 属性（比如 border="1"、border="0"），浏览器会忽略它。你看到边框生效，大概率是 CSS 重置样式或用户代理样式表在起作用，不是 HTML 标签本身的能力。必须走 CSS 路径——哪怕只是内联 style="border: 1px solid #e0e0e0;" 也行。
border 的三个参数缺一不可
写 border 时漏掉任意一项，边框就失效：
-
border-width：推荐1px或0.0625rem（≈1px，适配缩放）；避免用0.5px，它依赖transform: scale()，在打印、截图、部分安卓 WebView 中会模糊或消失 -
border-style：只用solid；dashed、dotted破坏极简感，且虚线在小图上根本看不出间隔 -
border-color：选中性灰，如#e0e0e0、#f5f5f5；纯黑（#000）或纯白（#fff）只有在高对比场景下才可用，日常页面易显生硬
图片底部留白和盒模型陷阱
默认 <img> 是内联元素，基线对齐导致下方有空白缝隙；加了 border 后还可能因 box-sizing: content-box（默认）让总高度变大：
- 加
display: block;消除底部间隙 - 加
box-sizing: border-box;确保width/height包含边框，不撑开容器 - 如果图片在 flex 容器里，顺手加
align-self: flex-start;防止被拉伸
完整最小可行样式：
img {
display: block;
border: 1px solid #e0e0e0;
box-sizing: border-box;
}
单侧细线比全边框更现代
真正克制的极简，往往只强调一个方向：
- 图文混排插图：用
border-bottom: 1px solid #eee;划分内容区，视觉轻、节奏清 - 左对齐头像/图标：
border-left: 0.0625rem solid #d9d9d9;提供垂直锚点，不抢主体 - 禁用
outline：它不支持border-radius，且点击后自动触发聚焦环，干扰设计一致性
别为了“精致”堆砌 box-shadow 或 border-image——细线边框的核心价值，就是一眼干净、零歧义、无副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
