最稳妥做法是初始设border: 2px solid transparent，hover时仅改border-color，确保尺寸不变；outline虽不占布局但不支持圆角和过渡；box-shadow可模拟无抖动边框且支持动画。
怎么用 CSS 给图片加 hover 边框
直接给 <img> 元素加 border 并配合 :hover 就能实现，但要注意默认边框会挤占布局、影响图片尺寸。最稳妥的做法是让边框「不改变图片原始大小」——也就是用 outline 或者提前预留透明边框。
-
outline不参与盒模型计算，hover 时不会导致图片抖动或父容器重排，适合快速加边框（但不支持圆角和内边距） - 更通用的方案是：初始设
border: 2px solid transparent，hover 时改颜色，这样宽高始终一致 - 如果图片是响应式（比如
max-width: 100%），记得边框宽度也要考虑在内，否则可能溢出容器
为什么 hover 后图片会跳动或错位
这是最常见的坑：直接写 img:hover { border: 2px solid #007bff; }，边框从无到有，突然增加 4px 宽度（左右各 2px），浏览器必须重新计算布局，图片就“跳”了。
- 错误写法：
img { } img:hover { border: 2px solid red; }→ 必然跳动 - 正确写法：
img { border: 2px solid transparent; } img:hover { border-color: #007bff; } - 若已用
box-sizing: border-box，也得确保它作用在img上（注意：HTML 图片默认是box-sizing: content-box）
怎么让 hover 边框带动画和圆角
纯 outline 不支持 border-radius 和 transition，所以必须走 border + 透明底边的路线，再补上过渡效果。
- 加圆角：
border-radius: 8px写在基础样式里（hover 时保持一致，否则动画会变形） - 加动画：
transition: border-color 0.3s ease, border-radius 0.3s ease（只过渡需要变化的属性，别写all） - 如果想边框“从中心向外展开”，得用
box-shadow模拟，例如：box-shadow: 0 0 0 2px #007bff，hover 时增大spread radius
移动端 hover 为什么不生效
大多数触摸设备（iOS Safari、Android Chrome）没有真正的 hover 状态，:hover 仅在模拟悬停（比如长按）或桌面模式下触发，不能当作点击前的反馈来依赖。
- 真要兼容移动端，建议改用
:active做按下态，或者用 JS 监听touchstart/touchend切换 class - 如果只是做视觉增强（比如相册预览），可保留 hover，但别让它承担关键交互逻辑
- 测试时务必在真机上点一下，别只靠开发者工具的「Toggle device toolbar」模拟
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
