border: 2px dashed #999 不生效主因是 img 默认 inline 导致 baseline 对齐及行高压缩，需设 display: block、box-sizing: border-box 并避免被重置样式覆盖。
直接用 border 配合 dashed 就能实现，但虚线框常因图片默认内联行为、盒模型或父容器干扰而“不显示”或“错位”，重点不是写法，而是控制渲染上下文。
为什么 border: 2px dashed #999 加了没反应？
最常见原因是图片默认为 display: inline，其 border 只作用于内容区（baseline 对齐导致底部留白），且垂直方向不撑开行高。虚线看起来像“断掉”或根本看不见。
- 给图片加
display: block或display: inline-block - 如果父容器有
font-size: 0或line-height压缩，也会吞掉虚线的垂直空间 - 检查是否被其他 CSS（如
img { border: none }）重置覆盖
如何让虚线框紧贴图片边缘、不额外撑开？
关键在盒模型：默认 box-sizing: content-box 下，border 会向外扩张。若需“边框就是图片轮廓”，必须显式设为 border-box。
- 推荐写法：
img { display: block; border: 2px dashed #ccc; box-sizing: border-box; } - 避免用
padding模拟虚线——语义错误，且响应式下易错乱 - 若需圆角虚线框，
border-radius和dashed可共存，但 Safari 旧版本对小半径+细虚线支持不稳定
想只在 hover 时显示虚线框，怎么写更稳妥？
hover 触发时突然加 border 会导致布局偏移（因为 border 增加了尺寸）。解决方法是预先占位，再切换样式。
- 基础方案：用透明边框占位 ——
img { border: 2px dashed transparent; } img:hover { border-color: #666; } - 更健壮方案：用
outline（不占布局空间），但outline不支持圆角和独立边设置 - 注意：不要对
img直接设transition: border，应写成transition: border-color，避免尺寸跳变
真正难的不是写那行 border，而是判断当前图片所处的文档流位置、父级约束、以及是否和其他重置样式冲突。多看一眼开发者工具里的 computed 样式，比反复改代码更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
