用:hover配合border实现图片悬停边框变厚，需先设默认透明边框（如border: 2px solid transparent），再用transition: border-width 0.3s ease实现平滑过渡，hover时改border-width和border-color即可。
用CSS的:hover伪类配合border属性即可实现图片悬停时边框厚度变化，关键是要预先设置默认边框（哪怕透明或极细），否则过渡会失效。
1. 必须先定义默认边框
如果图片初始没有边框（border: none），直接在:hover里写border: 3px solid #007bff，边框会出现但无法平滑过渡。正确做法是：默认设一个同色透明边框或1px透明边框。
-
✅ 推荐写法：
border: 2px solid transparent;（预留空间，颜色透明） -
✅ 或：
border: 1px solid rgba(0,0,0,0);（完全隐形但占位） -
❌ 避免写法：
border: none;→ 悬停时边框“突然弹出”，无过渡效果
2. 添加过渡动画（让变厚过程平滑）
仅改边框粗细还不够自然，需用transition控制变化节奏。
- 加在图片默认样式中：
transition: border-width 0.3s ease; - 也可过渡整个边框：
transition: border 0.3s ease;（同时影响宽、色、样式） - 常见缓动值：
ease（缓入缓出）、linear（匀速）、ease-in-out
3. 完整示例代码
复制粘贴即可使用：
<img src="example.jpg" alt="示例图" class="hover-border"><p><style>
.hover-border {
border: 2px solid transparent; /<em> 默认边框：2px宽，透明 /
transition: border-width 0.3s ease; /<em> 仅过渡宽度，0.3秒缓动 /
}
.hover-border:hover {
border-width: 6px; /<em> 悬停时加厚到6px /
border-color: #007bff; /<em> 同时显色（可选） /
}
</style></p>
4. 注意事项
- 边框加厚会略微撑大图片容器，如需保持布局稳定，可用
box-sizing: border-box;（对img元素默认无效，建议父容器设overflow: hidden或用outline替代） - 若想边框出现时不挤占内容，可用
outline代替border（outline不占布局空间），但outline不支持圆角和不同边独立设置 - 移动端注意：iOS Safari 对 img 的 hover 支持有限，建议搭配
touchstart事件或改用点击态（:active）增强兼容性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
