要让焦点图“跳出来”，应使用box-shadow而非outline，推荐双层rgba阴影：0 0 8px 2px rgba(59,130,246,0.2), 0 0 16px 6px rgba(59,130,246,0.1)，配合:focus-visible和层叠上下文修复裁切问题。
box-shadow 怎么写才能让焦点图“跳出来”
纯色边框或 outline 会割裂设计，box-shadow 是更柔和、更可控的视觉聚焦手段。关键不是加阴影，而是控制扩散、偏移和透明度，让眼睛自然落在目标区域。
实操建议：
-
box-shadow至少用两个值：水平偏移和垂直偏移设为0，避免阴影“拉歪”焦点； - 模糊半径（blur radius）建议在
8px到16px之间——太小没存在感，太大边缘发虚、弱化主体； - 扩展半径（spread radius）设为正数（如
2px）可轻微撑大阴影范围，比纯模糊更“托得住”元素； - 务必配
rgba()颜色，比如rgba(59, 130, 246, 0.3)，透明度低于0.4才不抢内容，高于0.5就像蒙了层灰。
focus-visible 里用 box-shadow 的兼容性陷阱
直接给 :focus 加 box-shadow 会干扰键盘用户（比如 Tab 进入时突兀高亮），而现代做法是配合 :focus-visible ——但它的行为不像看起来那么可靠。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox 中鼠标点击后不触发
:focus-visible，导致焦点图完全不出现； - Safari 15.4+ 才支持
:focus-visible，旧版会直接忽略整条规则； - 某些 UI 库（如 Tailwind 默认配置）把
:focus和:focus-visible混用，结果鼠标操作也套上阴影。
安全做法：
- 用
:focus:not(:focus-visible) { outline: none; }主动关掉非键盘焦点的 outline； - 把
box-shadow只写在:focus-visible下，不退回到:focus； - 若需兼容 Safari 15.3 及更早版本，单独加一条
@supports not selector(:focus-visible) { :focus { box-shadow: ... } }。
多层 box-shadow 做“呼吸感”焦点效果
单层阴影容易显得板硬，两层叠加能模拟光晕过渡，让焦点区域有纵深感，且动画更平滑。
参数差异示例：
button:focus-visible {
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.2),
0 0 0 6px rgba(59, 130, 246, 0.1);
}
说明：
- 第一层是紧贴边框的细环（
2px扩展 + 低透明度），起定位作用； - 第二层是稍宽的柔光晕（
6px扩展 + 更低透明度），负责营造“浮起”感； - 两层都设
0 0偏移，避免方向性干扰； - 禁用
transition里的box-shadow简写（如all 0.2s），否则 Safari 会闪动——应明确写transition: box-shadow 0.2s ease;。
焦点图阴影被父容器 overflow hidden 裁掉怎么办
轮播图容器、卡片组件常设 overflow: hidden，结果 box-shadow 被截断，焦点效果残缺。
这不是阴影写错了，是布局层级问题：
- 检查父元素是否真需要
overflow: hidden——圆角裁剪可用border-radius配合clip-path替代； - 若必须保留
overflow: hidden，把焦点图元素用position: relative+z-index提前，同时父容器加transform: translateZ(0)或will-change: transform强制新建层叠上下文（否则z-index无效）； - 极端情况可改用伪元素
::after绘制阴影，并设pointer-events: none，避开事件干扰。
阴影本身不会触发重排，但错位、裁切、闪烁这些问题，往往卡在布局模型和层叠上下文的交界处——这里最容易被当成 CSS bug，其实是渲染层逻辑没对齐。
