:focus时box-shadow不生效的主因是outline未禁用或transition未在默认状态声明；需在input基础样式中设transition: box-shadow 0.2s ease，:focus加outline: none并配outline-offset，慎用filter替代box-shadow。
focus时box-shadow不生效？检查outline和transition声明顺序
很多情况下写好了box-shadow，但点击输入框却没过渡效果，甚至阴影压根不出现。核心原因常是outline没关掉，或者transition没写在基础状态里。
- 必须在
:focus前的默认状态（如input或input:not(:focus)）就声明transition: box-shadow 0.2s ease，否则浏览器无法插值过渡 -
outline: none要加在:focus上，但得配合outline-offset微调可访问性——完全删掉outline会损害键盘导航体验 - 如果用了
appearance: none或重置了边框，记得手动补上border，否则box-shadow可能被裁剪（尤其Safari）
阴影太“飘”或边缘模糊？控制spread-radius和color透明度
好看的焦点阴影不是越亮越好，关键在层次感和视觉锚定。直接套用box-shadow: 0 0 8px #007bff容易显得浮、廉价，且在深色背景上失效。
- 推荐组合：
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.2), 0 0 0 6px rgba(0, 123, 191, 0.1)——双层阴影，外层更虚、更透，内层提供清晰轮廓 -
spread-radius（第三个参数）设为正值能撑开阴影范围，比单纯加大blur-radius（第二个参数）更可控；设负值则收缩，适合做“内嵌高亮”效果 - 颜色一律用
rgba()，alpha值建议0.05–0.2之间；纯色阴影在不同背景色下极易违和
移动端点击无反馈？focus伪类在iOS Safari里有延迟
iOS Safari对:focus的触发有约300ms延迟，且软键盘弹出后焦点可能丢失，导致阴影闪一下就没了。
- 优先用
:focus-within包裹父容器（如label或div.form-control），它响应更快，也兼容tap行为 - 对
input[type="text"]等可聚焦元素，加touch-action: manipulation减少延迟 - 避免依赖
:focus做关键交互提示；必要时用JS监听focusin事件补一层class，比如is-focused
暗色模式下阴影看不见？别硬编码颜色值
写死#007bff在深色主题里几乎不可见，而用currentColor又容易过淡——因为输入框文本色在暗色模式下通常也变浅了。
- 用CSS自定义属性：定义
--focus-shadow-color: 0 123 191，然后在:focus中写box-shadow: 0 0 0 3px rgba(var(--focus-shadow-color), 0.2) - 在
@media (prefers-color-scheme: dark)里覆盖--focus-shadow-color为更亮的RGB值，比如100 180 255 - 慎用
filter: drop-shadow()替代box-shadow——它不支持spread，且在部分安卓WebView中渲染异常
真正难的不是写出阴影，而是让阴影在各种缩放、高对比度、屏幕阅读器聚焦、甚至Windows高对比主题下都保持可感知又不抢戏。过渡时间、颜色透明度、伪类触发时机，三个地方动一个，都可能让整个反馈链断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
