内发光需用box-shadow: inset配合大模糊半径、合适偏移与透明色，如inset 0 0 12px 2px #66b3ff；聚焦时通过transition和动态调整参数增强反馈；safari需注意border-radius匹配、-webkit-appearance重置及outline处理；禁用filter: drop-shadow()替代。
box-shadow inset 怎么写才有效果
内发光本质是用 box-shadow 的 inset 关键字把阴影“塞进”元素内部，不是加个 inset 就自动发光——它必须配合足够大的模糊半径和合适的偏移，否则看起来像描边或根本看不见。
-
box-shadow: inset 0 0 12px 2px #66b3ff;是最常用起点：0 0表示无偏移，12px模糊值决定光晕软硬，2px扩展值控制光晕厚度 - 颜色别用纯白（
#ffffff），尤其在浅色背景上会“消失”，选带饱和度的蓝、紫、青（如#4dabf7）更易识别 - 如果输入框有
border，内阴影默认被 border 遮住，得加border: none;或用background-clip: padding-box;确保阴影从内边距区开始渲染
聚焦时怎么让内发光“亮起来”
用户真正要的是交互反馈，单纯静态内发光意义不大。关键在 :focus 伪类里动态增强效果，但容易因过渡不连贯显得突兀。
- 必须加
transition: box-shadow 0.2s ease;到原始input样式中，否则阴影变化会瞬间切换 - 聚焦时别只调大模糊值，同时微调扩展值和透明度：比如常态
inset 0 0 6px 1px rgba(102, 179, 255, 0.3)，聚焦时改为inset 0 0 16px 3px rgba(102, 179, 255, 0.6) - 避免用
!important覆盖其他框架样式（如 Bootstrap 的.form-control:focus），优先提高 CSS 选择器权重，比如用input[type="text"]:focus
为什么在 Safari 上内发光不显示或错位
Safari 对 box-shadow: inset 的渲染逻辑更严格，尤其当输入框有圆角（border-radius）或使用了 appearance: none 时，阴影可能被裁剪或偏移。
- 确保
border-radius值与box-shadow的模糊/扩展值匹配，例如border-radius: 6px;时，inset阴影的模糊值不宜超过12px，否则边缘发虚甚至消失 - Safari 15.4+ 对
input的默认appearance处理异常，强制加-webkit-appearance: none;并重置所有边框/背景相关属性 - 如果用了
outline: none;又没提供替代焦点样式，Safari 可能完全忽略:focus下的box-shadow，务必保留可访问性焦点环或用outline: 2px solid transparent;占位
要不要用 filter: drop-shadow() 替代
不用。虽然 filter: drop-shadow() 也能模拟内光，但它作用于整个元素的 alpha 通道，对圆角、透明背景等场景会漏光或产生意外晕染，且不支持 inset 方向控制。
立即学习“前端免费学习笔记（深入）”；
-
drop-shadow()是外投影滤镜，强行反转方向（负偏移）无法精准贴合内边缘，尤其在border-radius > 0时，光晕会从圆角顶点“溢出” - 性能上，
filter触发全层重绘，而box-shadow: inset是合成层优化项，在滚动或动画中更稳定 - 兼容性：IE 完全不支持
filter: drop-shadow()，但box-shadow: inset在 IE11+ 已可用（仅需注意 IE 不支持 rgba 透明色，得降级为hsla()或十六进制）
内发光不是加个 box-shadow: inset 就完事，它卡在模糊值、扩展值、颜色透明度、圆角、浏览器渲染差异这几个点上反复较劲。调的时候盯着 Safari 和 Chrome 的表现差，比对着设计稿调数值更重要。
