CSS实现光泽效果有两种核心方案：一是用filter: drop-shadow()为PNG等透明图像添加贴合轮廓的外发光，二是用伪元素配合background-position动画模拟扫光效果；前者语义干净、兼容性好，后者适合按钮和Logo的动态高光。
直接说结论：CSS 实现光泽效果，核心就两条路——用 filter: drop-shadow() 包裹图像轮廓做外发光，或用 background + transition + 伪元素模拟移动高光。前者适合静态/交互式图片发光，后者适合按钮、Logo 等需要“扫光”动效的场景。
用 drop-shadow() 给图片加真实轮廓发光
这是目前最可靠、语义最干净的方式，尤其适合 PNG 图像——它会严格贴合透明边缘，不会像 box-shadow 那样只框一个矩形。
- 基础写法：
filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));，必须保证前两个值是0 0，否则变成位移阴影 - 想增强层次？叠加两层：
filter: drop-shadow(0 0 8px #ffcc00) drop-shadow(0 0 16px rgba(255, 100, 0, 0.4));，外层模糊更大、颜色更淡，符合光学衰减 - 常见错误：在父容器上设了
overflow: hidden，导致发光部分被裁掉；或者忘了加transition: filter 0.3s ease，hover 时闪烁生硬 - 兼容性注意：Safari 旧版需加
-webkit-filter前缀；IE 完全不支持，得回退到text-shadow或伪元素方案
用伪元素 + background-position 做扫光动画
这种是“闪光”而非“发光”，典型用于 Logo、按钮上的高光掠过效果，视觉上更灵动，但需要额外 DOM 结构或伪元素。
- 结构上至少两层：外层容器（
a.logo）设overflow: hidden和背景图，内层（span或::before）放高光图或渐变 - 关键参数：
background: linear-gradient(135deg, transparent, rgba(255,255,255,0.8), transparent);+background-size: 200% 200%;，再用transition动background-position - 容易踩坑：没设
display: block或inline-block，导致伪元素不占空间；或background-position初始值没对齐，动画一上来就跳 - 性能提示：避免用大尺寸高光图；改用 CSS 渐变 +
transform: translateZ(0)触发硬件加速更稳
文字发光别只靠一层 text-shadow
单层 text-shadow: 0 0 10px #fff 在多数场景下等于没加——要么糊成一团，要么完全看不见。
立即学习“前端免费学习笔记（深入）”；
- 真正可用的写法是叠 3–4 层，模糊半径递增：
text-shadow: 0 0 4px #fff, 0 0 8px rgba(255,255,255,0.6), 0 0 16px rgba(255,255,255,0.3); - 深色背景用暖白光（如
#ffdd66），浅色背景改用深灰光（rgba(0,0,0,0.4)），否则对比度崩塌 - 千万别给小字号（body 上，表单输入框文字会变得难读
- 如果要霓虹描边感，得换路线：
color: transparent;+background-clip: text;+text-shadow做辅助光晕
复杂点在于：光泽不是一种效果，而是三类不同需求的统称——轮廓发光、表面扫光、文字辉光。选错技术路径，后期改起来比重写还费劲。尤其是动效类扫光，一旦用 JS 控制 background-position，就失去 CSS 硬件加速优势；而纯 CSS 的 hover 动画又没法响应鼠标位置。这些边界，得在动手前就划清楚。
