HTML本身不控制hover轮廓，outline是CSS属性且默认仅focus时显示；需手动写:hover CSS，注意其不触发重排、无圆角、易被系统设置覆盖。
直接说结论：HTML 本身不控制 hover 轮廓，outline 是 CSS 属性，且默认 focus 状态才显示；想用 hover 触发 outline，必须手动写 CSS，并注意 outline 不会触发重排、不能设圆角、且可能被用户系统设置强制覆盖。
为什么 outline 在 hover 下经常“没反应”
浏览器默认只对可聚焦元素（如 <a>、<button>、带 tabindex 的元素）在获得焦点（focus）时渲染 outline，hover 本身不激活它。如果你给一个 <div> 直接写 :hover { outline: 2px solid red; } 却看不到效果，大概率是因为该元素不可聚焦 —— outline 会渲染，但视觉上可能被默认 outline-offset 或透明色吞掉。
- 检查是否设置了
outline: none或outline: 0（尤其在重置样式表里） - 确认元素有明确的
display和尺寸（outline不占布局空间，若元素宽高为 0，轮廓也看不见） - Chrome/Firefox 默认对非表单/链接元素的 hover 不触发 outline，这是行为而非 bug
:hover + outline 的正确写法（含兼容性要点）
只要元素可聚焦（或你让它可聚焦），:hover { outline: ... } 就能生效。最稳妥的方式是显式加 tabindex="0"，并补全关键声明：
<div tabindex="0" class="hover-outline">悬停我</div>
<p>.hover-outline:hover {
outline: 2px solid #007bff;
outline-offset: 2px; /<em> 让轮廓离边缘留空，更清晰 </em>/
outline-style: solid;
}-
outline-offset推荐始终设置，否则轮廓紧贴边框易被忽略 - 不要用
outline-radius—— 它不存在，outline永远是直角矩形 - IE11 及更早版本不支持
outline-offset，若需兼容，改用box-shadow模拟（见下一条）
替代方案：box-shadow 实现“伪 outline”（推荐多数场景）
当需要圆角轮廓、内阴影、或绕过 outline 的系统级限制（比如 Windows 高对比度模式会强制重绘 outline），box-shadow 更可控：
立即学习“前端免费学习笔记（深入）”；
.hover-shadow:hover {
box-shadow: 0 0 0 2px #007bff;
/* 圆角轮廓？直接加 border-radius，box-shadow 会跟随 */
border-radius: 4px;
}-
box-shadow支持inset、多层、模糊、颜色渐变，outline全不支持 - 性能略低于
outline（触发重绘而非重绘+重排），但现代浏览器几乎无感 - 移动端 Safari 对
outline的 hover 支持不稳定，box-shadow表现一致
无障碍与真实使用中容易被忽略的一点
如果用户依赖键盘导航（Tab 切换），他们需要看到 focus 轮廓 —— 但你用 :hover { outline: ... } 后，可能误删了 :focus 样式，导致键盘用户完全失去焦点指示。务必同时定义：
.interactive-element:focus,
.interactive-element:hover {
outline: 2px solid #007bff;
outline-offset: 2px;
}更严谨的做法是：只用 :focus-visible 控制焦点轮廓（避免鼠标用户看到多余 outline），再单独用 :hover 控制悬停效果 —— 但目前 Safari 对 :focus-visible 支持仍有限，生产环境建议双写。
