:focus内阴影失效主因是inset关键字位置错误，必须紧接box-shadow:后；边框遮挡时可去border改用outline或设透明边框；加transition需写在基础状态；iOS Safari需确保可聚焦。
聚焦时内阴影不生效？检查box-shadow语法顺序和inset关键字
直接加 box-shadow: inset 0 0 4px blue; 到 :focus 是最常见写法，但容易失效——关键在于 inset 必须紧跟在 box-shadow: 后面，且不能漏掉。如果之前已有外阴影，inset 写错位置会导致整个声明被浏览器忽略。
- 正确写法：
input:focus { box-shadow: inset 0 0 6px #3b82f6; } - 错误写法：
box-shadow: 0 0 6px #3b82f6 inset;（inset放最后无效） - 若同时需要内外阴影，用逗号分隔：
box-shadow: 0 0 2px rgba(0,0,0,0.1), inset 0 0 4px #3b82f6;
输入框有边框时，内阴影被遮挡怎么办？调整border和z-index关系
box-shadow 默认绘制在 border 之上，但 inset 阴影是向内投射的，会被 input 自身的 border 挡住一部分——尤其当 border 较粗或颜色深时，阴影看起来“断了一截”。
- 解决方案一：去掉原生 border，改用
outline: none+box-shadow承担视觉焦点提示 - 解决方案二：保留 border，但把 border 颜色设为透明或极浅色，例如
border: 2px solid rgba(0,0,0,0.05); - 注意：
z-index对box-shadow无效，别白费劲加
聚焦阴影太突兀？用transition平滑过渡
默认聚焦是瞬间出现，体验生硬。加 transition 能明显提升质感，但必须作用于原始状态（非 :focus），否则首次聚焦无动画。
- 写在基础 input 上：
input { transition: box-shadow 0.2s ease; } - 避免只写
transition: all，它会连 width、color 等一起动，可能引发意外重排 - 时间建议 0.15s–0.3s，太长显得迟钝，太短接近无感
移动端 Safari 不触发:focus？补上tabindex和触摸事件兼容
iOS Safari 对纯点击的 input 有时不触发 :focus，尤其嵌套在 flex 或 modal 中时。这不是 CSS 问题，但直接影响阴影是否显示。
- 确保 input 有
tabindex="0"（非必需但保险） - 避免父容器设置
pointer-events: none或user-select: none - 极端情况可监听
touchstart并手动 addClass，但优先排查结构和 focusable 层级
实际效果受字体渲染、缩放、系统高对比度模式影响较大，内阴影的明暗对比要预留余量，别依赖绝对色值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
