局部发光必须用伪元素+定位+渐变遮罩实现，因box-shadow和drop-shadow仅支持全图轮廓发光；核心是通过::before绝对定位在指定区域叠加半透渐变，并配合transition与transform实现动态高光效果。
局部发光不能靠 box-shadow 或单层 drop-shadow() 实现——它们要么框整个矩形，要么包全图轮廓。真要“只亮眼睛”“只亮Logo左上角”，必须用伪元素 + 定位 + 渐变遮罩。
用 ::before 伪元素模拟局部高光区
核心思路是：在图片上盖一层半透浅色渐变，只让它出现在你指定的位置（比如右上角1/4区域），再通过 background-position 或 transform 控制其范围和过渡。
- 图片父容器必须设
position: relative，否则伪元素无法精确定位 - 伪元素用
position: absolute，top/right等值手动锚定到目标区域（例如top: 10%; right: 15%; width: 30%; height: 20%） - 背景推荐
linear-gradient(135deg, rgba(255,255,255,0.8), transparent 70%)，避免纯白“死光” - 加
transition: opacity 0.4s ease, transform 0.4s ease，hover 时可轻微缩放或移入
filter: drop-shadow() 不适合局部发光
它作用于整张图的 Alpha 轮廓，没有“选区”概念。哪怕你只想要左眼发光，它也会把整张人脸、头发、背景透明区一起包进去——这不是局部，是全图边缘发光。
- 常见误用：
filter: drop-shadow(0 0 12px #fff)加在<img>上，以为能控制范围 → 实际光晕仍覆盖全部透明边缘 - 若强行裁剪（如父容器设
overflow: hidden），光晕会被硬切，边缘生硬、不自然 - 多层
drop-shadow()只能增强整体辉光层次，无法实现空间定位
需要动态“扫光”或“聚焦光斑”？别动 filter
filter 动画性能差，且不支持 background-position 这类属性。真正可控的方式是用伪元素配合 background 和 transform：
立即学习“前端免费学习笔记（深入）”；
- 写一个
img::after，background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6), transparent 70%)，把光斑中心钉在左眼坐标 - hover 时用
transform: scale(1.2)模拟光晕扩散，比调大blur更锐利 - 若需鼠标跟随光斑，得用 JS 监听
mousemove并实时更新background-position，但注意防抖（requestAnimationFrame）
局部发光的本质是“遮罩+提亮”，不是“滤镜+模糊”。最容易被忽略的是：伪元素的 z-index 必须高于图片内容，且父容器不能有 isolation: isolate 或 mix-blend-mode 干扰层叠上下文。
