box-shadow实现外发光需用rgba/hsla控制透明度并配合适当模糊值（如12px起），内发光须用伪元素模拟；叠加时注意层级与性能，兼容性上需规避IE及混合模式限制。
box-shadow 实现外发光：基础写法和颜色陷阱
外发光本质就是 box-shadow 的标准用法，但很多人调不出“柔和光晕”是因为忽略了模糊半径和颜色透明度的配合。纯白或纯黑的 box-shadow 在深色/浅色背景上都会发硬、突兀。
- 用
rgba()或hsla()控制发光色透明度，比如box-shadow: 0 0 20px rgba(100, 150, 255, 0.6) - 避免直接写
#fff或white——它不透明，边缘生硬 - 模糊值（第三个参数）建议从
12px起步，太小看不出光晕，太大又糊成一团 - 注意：
box-shadow默认绘制在元素内容层之上，所以不会被子元素遮挡，这点和filter: drop-shadow()不同
box-shadow 模拟内发光：绕不开的伪元素方案
CSS 没有原生 inset 发光语法能真正“从内部透出光”，box-shadow: inset 只是把阴影画在容器内侧边缘，不是光源从里往外散射的效果。真内发光必须靠 ::before 或 ::after 配合 border-radius 和扩散阴影模拟。
- 给容器设
position: relative，再用伪元素盖在上面，宽高 100%，border-radius和容器一致 - 伪元素加
box-shadow: 0 0 25px rgba(255, 220, 100, 0.7)，再设z-index: -1让它沉到底层 - 切记：伪元素必须有
content: ""，否则不渲染；且不能设display: none或visibility: hidden - 如果容器有滚动或 overflow，伪元素可能被裁掉，此时要加
overflow: visible或调整父级clip-path
内外发光同时存在时的层级与性能坑
外发光靠本体 box-shadow，内发光靠伪元素 + box-shadow，两者叠加后容易出现光晕打架、边缘重影，或者在 Safari 上闪烁。
- 确保伪元素的
z-index明确低于内容层（如-1），但高于背景（如背景是z-index: -2） - 避免对同一元素同时使用
box-shadow和filter: drop-shadow()，它们触发不同渲染管线，叠加后模糊效果不可控 - 大量使用高模糊值（>30px）的
box-shadow会显著增加合成层开销，尤其在移动端，滑动时易掉帧 - Chrome DevTools 的 “Rendering” 面板打开 “Paint flashing” 可直观看到哪些区域因阴影频繁重绘
兼容性与设计还原的现实约束
所谓“完美发光”在 CSS 里从来只是近似。设计师给的 Figma 效果常基于图层混合模式（如 Screen、Linear Dodge），而 CSS 无对应实现，只能妥协。
立即学习“前端免费学习笔记（深入）”；
-
box-shadow不支持混合模式，filter: blend-mode也未被广泛支持（仅 Firefox 支持mix-blend-mode在伪元素上生效） - IE 完全不支持
rgba()在box-shadow中（IE9+ 才开始部分支持），如需兼容，得准备降级为单色硬边阴影 - 暗色模式下，发光色若没随系统主题切换，会直接糊成一块，建议用
prefers-color-scheme媒体查询重置box-shadow颜色 - 最常被忽略的一点：发光效果在 Retina 屏上会因像素比放大而变淡，实际开发中要适当提高模糊值或透明度补偿
