按钮组容器必须设为 position: relative，否则伪元素会相对于 body 定位导致高亮错位；应使用 inset: 0 + z-index: -1 实现精准贴合且防遮挡，兼容性不足时需用 @supports 回退四值写法。
按钮组容器必须设为 position: relative
伪元素 ::before 或 ::after 要精准覆盖单个按钮，就得依赖父容器的定位上下文。如果按钮组外层是 display: flex 但没加 position: relative，伪元素会相对于 body 定位，高亮就飘走。
常见错误现象：::before 高亮条出现在页面左上角，或横向错位一整行。
- 按钮组最外层元素（比如
<div class="btn-group">）必须显式设置 <code>position: relative - 每个按钮本身用
position: relative也可以，但没必要——统一在容器上设更轻量、更易维护 - 若按钮组嵌套在
transform元素内（如动画卡片），transform会创建新的定位上下文，此时容器需额外加position: relative覆盖它 - 伪元素要加
content: ""，否则不渲染 - 推荐写法：
.btn:hover::before { position: absolute; inset: 0; background: #007bff; opacity: 0.1; z-index: -1; } - 别忘了
z-index: -1，否则高亮会盖住按钮文字和边框 - 如果按钮有圆角（
border-radius），伪元素默认不继承，得手动加上相同值 - 高亮背景建议用
opacity渐变，而不是从scale(0)放大到scale(1)——后者虽流畅，但若按钮有 border-radius，缩放会导致边缘锯齿 - 禁用
transition在background-color上直接过渡，老浏览器可能闪烁；改用background+opacity组合更稳 - 所有
transition属性限定在opacity和transform，例如：transition: opacity 0.2s ease, transform 0.2s ease - 安全写法：先写
top: 0; right: 0; bottom: 0; left: 0，再用@supports (inset: 0) { ... }覆盖 - 别依赖
inset-block/inset-inline，兼容性更差，目前仅 Firefox 91+ 和 Chrome 110+ 支持 - 伪元素层级在 Safari 旧版中对
z-index: -1表现不稳定，可改用z-index: 0+background-clip: padding-box控制绘制边界
伪元素高亮要用 absolute + inset 精准贴合
不用 top/left/width/height 四值写法，改用 inset: 0 更可靠——它等价于 top: 0; right: 0; bottom: 0; left: 0，且受 transform 影响小，缩放/平移时也不易偏移。
使用场景：需要高亮整个按钮区域（含 padding），而非仅文字或图标部分。
立即学习“前端免费学习笔记（深入）”；
hover 状态下避免重排（reflow）的关键控制
用 opacity 或 transform 做淡入/缩放反馈是安全的；但改 width、height、margin 或触发 box-shadow 大范围扩散，容易引发 layout thrashing，尤其在密集按钮组里滚动时卡顿。
性能影响：Chrome DevTools 的 Rendering 面板开启“Paint flashing”后，能看到频繁绿色闪动，就是重绘过载。
兼容性陷阱：IE11 和 Safari 13.1 之前的 inset 不支持
inset 是 CSS Logical Properties 的一部分，Safari 直到 13.1 才支持，IE11 完全不认。线上项目若还需兼容，得回退到传统四值写法，并用 @supports 隔离。
容易踩的坑：开发时用最新 Chrome 测试没问题，上线后用户反馈高亮消失——大概率是 Safari 旧版或企业内网 IE 模式。
pointer-events: none 配合 JS 强制重置，不过那是另一个问题了。
