用CSS :hover实现图片边框需避免位置偏移：初始设透明边框或用outline；可叠加box-shadow、transform等增强效果；注意移动端:hover兼容性及响应式适配。
直接用 CSS 的 :hover 伪类就能实现，关键是要避免边框出现时图片位置偏移。
基础写法：给 img 标签加 hover 边框
最简方式是直接在 img 元素上设置初始边框（哪怕透明），再通过 :hover 改变颜色或粗细：
- HTML 中只需写
<img src="xxx.jpg" alt=""> - CSS 中这样写：
img { width: 200px; height: 150px; border: 2px solid transparent; /* 初始留出边框空间 */ transition: border-color 0.2s ease; } img:hover { border-color: #e74c3c; } - 不写
transparent而直接用border: none，悬停时加边框会导致图片突然“撑开”或跳动
更稳妥：用 outline 替代 border（不占布局空间）
outline 不影响元素尺寸和文档流，适合不想改动原有布局的场景：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
img { outline: 2px solid transparent; }img:hover { outline-color: #3498db; }- 注意：
outline无法设置圆角（border-radius对它无效）
进阶效果：带阴影或动画的边框
想让效果更突出，可以叠加 box-shadow 或控制过渡节奏：
立即学习“前端免费学习笔记（深入）”；
- 加内发光感：
img:hover { border: 2px solid #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.4); } - 缓慢放大+边框：
img { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } img:hover { transform: scale(1.02); border-color: #9b59b6; } - 若用
transform，建议同时加will-change: transform提升渲染性能
常见问题避坑
实际开发中容易踩的几个点：
- 别把
:hover写在父容器（如a或div）上再操作子img，除非你明确需要父级触发——否则响应不精准 - 如果图片是响应式（
max-width: 100%），确保border不破坏比例，可改用outline或配合box-sizing: border-box - 移动端需额外测试：iOS Safari 对
:hover支持有限，首次点击才激活，必要时用 JavaScript 补充touchstart类似逻辑
