大屏边框发光必须用多层 box-shadow（至少3层，模糊半径递增且 offset 为0，rgba 降 alpha 控制衰减），禁用 border+transition 和 filter: drop-shadow()；需设 background、display: block，排查 ios 降低透明度、overflow: hidden 及无预留空间问题。
大屏模块边框发光不能靠 border + transition 硬凑，高 DPR 下会糊、断、闪；得用 box-shadow 多层叠加 + 严格参数控制，否则在 4K 屏上根本看不出“光”，只看到灰边。
为什么直接写 box-shadow: 0 0 10px #0ff 在大屏上失效
单层阴影在高分辨率下缺乏层次感，浏览器渲染时模糊半径被 DPR 拉伸失真，实际效果是发虚的光晕，不是聚焦的“边框光”。更麻烦的是：iOS Safari 对大于 40px 的模糊值支持不稳定，部分安卓 WebView 会直接丢弃最外层阴影。
- 必须用逗号分隔的多层
box-shadow，至少 3 层，且模糊半径严格递增（如6px→16px→32px） - 所有层的
offset-x和offset-y必须为0，否则光晕偏移、不对称 - 颜色统一色相，仅靠
rgba()降 alpha 控制衰减，例如：rgba(0, 200, 255, 0.7)→rgba(0, 200, 255, 0.4)→rgba(0, 200, 255, 0.15) - 避免写成多个
box-shadow:声明，必须合并到一行，否则后声明会覆盖前声明
table 或 div 模块加发光边框的实操写法
表格类模块（如指标卡、数据列表）不能依赖 filter: drop-shadow()，它对 table 的 Alpha 轮廓识别极差，常只在左上角投一个歪斜矩形。必须把模块当普通块级容器处理。
- 确保模块有明确的
background（哪怕background: #000），否则光晕被浅色背景吃掉 - 给模块设
display: block（table默认是 table-box，需显式覆盖） - 推荐写法：
module-card {<br> display: block;<br> background: #0a0f2c;<br> box-shadow: 0 0 6px rgba(0, 200, 255, 0.7),<br> 0 0 16px rgba(0, 200, 255, 0.4),<br> 0 0 32px rgba(0, 200, 255, 0.15);<br>} - 若模块含圆角，
box-shadow会自动跟随，但filter: drop-shadow()不会——这点很关键
发光太弱 / 完全看不见？先查这三件事
不是代码错，而是环境或父容器干扰。真机调试时 80% 的“没效果”都卡在这几步。
- iOS 系统「降低透明度」辅助功能开启 → 直接剥离所有半透明阴影，关掉再试
- 父容器设了
overflow: hidden或clip-path→ 发光像素被裁掉，临时加outline: 1px solid red看发光区域是否被截 - 模块没设
margin或padding预留空间 → 光晕紧贴屏幕边缘被物理裁切，建议加padding: 16px或用transform: translateZ(0)强制 GPU 渲染提升精度
真正难的不是写几行 box-shadow，而是让光在不同设备、不同缩放、不同系统设置下都稳定可见——参数微调 1px、alpha 降 0.05、模糊值卡死在 32px 以内，这些细节才是上线前必须逐台真机验证的点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
