HTML图片默认无:active/:focus边框响应，需设初始透明边框（如border:2px solid transparent）并用img:active修改border-color；若需键盘支持，加tabindex="0"并配合:focus-visible优化可访问性。
HTML 中图片本身没有 :active 或 :focus 的默认边框响应行为，但可以通过 CSS 的 :active 伪类 + 明确的边框定义，实现“鼠标按下瞬间边框变色”的效果。关键不是靠 JS，而是利用浏览器原生的激活态样式控制。
用 :active 实现点击瞬间边框变色
给 <img alt="HTML怎么设置图片边框在鼠标点击时变色" > 元素直接设置 border 和 :active 样式即可。注意：必须有初始边框（哪怕透明），否则 :active 无法触发视觉变化。
- 为图片设置初始边框，例如
border: 2px solid transparent - 在
img:active中修改border-color，如border-color: #007bff - 可加
transition让颜色切换更平滑（但点击态持续时间极短，过渡效果可能不明显）
示例代码：
img {
border: 2px solid transparent;
transition: border-color 0.15s;
}
img:active {
border-color: #e74c3c;
}
让图片可被聚焦并支持键盘操作
纯 <img alt="HTML怎么设置图片边框在鼠标点击时变色" > 默认不可聚焦，若需兼容键盘用户（如按空格键触发），应添加 tabindex="0"，再配合 :focus 样式：
立即学习“前端免费学习笔记（深入）”；
- HTML：
<img src="cat.jpg" tabindex="0" alt="HTML怎么设置图片边框在鼠标点击时变色" > - CSS：
img:focus { outline: none; border-color: #27ae60; } - 建议同时写
img:focus-visible提升可访问性
避免点击时出现默认蓝色轮廓
部分浏览器在点击可聚焦元素时会显示 outline（淡蓝虚线），这不是边框，但常被误认为“异常边框”。要隐藏它，必须显式重置：
-
img:focus { outline: none; }—— 简单粗暴，但降低可访问性 -
img:focus-visible { outline: 2px solid #3498db; }—— 更推荐，仅对键盘用户显示友好轮廓
如果需要“松开才变色”或状态保持
:active 只在鼠标按下期间生效，松开即恢复。如需点击后维持边框色（类似选中态），就得借助 JS 切换 class：
- HTML：
<img src="dog.jpg" onclick="this.classList.toggle('selected')" alt="HTML怎么设置图片边框在鼠标点击时变色" > - CSS：
.selected { border: 2px solid #9b59b6; } - 更健壮的做法是用
addEventListener监听click，并管理状态类
