用box-shadow实现悬浮发光边框的核心写法是：.card-img{transition:box-shadow.3sease;}.card-img:hover{box-shadow:0 0 0 4px rgba(59,130,246,.3),0 0 16px rgba(59,130,246,.5);}，第一层控制粗细，第二层控制扩散，需配合overflow:hidden与响应式适配。
用 box-shadow 实现悬浮发光边框的核心写法
直接加 box-shadow 就能实现，但关键在「过渡平滑」和「发光不溢出」。默认卡片如果没设 overflow: hidden，强光阴影可能撑开布局或遮挡相邻元素；另外纯 box-shadow: 0 0 15px #00f 在深色背景上几乎看不见，得配合 inset 或双层阴影增强对比。
推荐写法：
.card-img {
transition: box-shadow 0.3s ease;
}
.card-img:hover {
box-shadow:
0 0 0 4px rgba(59, 130, 246, 0.3),
0 0 16px rgba(59, 130, 246, 0.5);
}
第一层是「透明描边」，控制发光粗细；第二层是「柔光扩散」，控制范围和强度。两个值都用 rgba 而非纯色，避免夜间模式下刺眼。
图片卡片容器必须设 overflow: hidden 吗
不是「必须」，但强烈建议。否则 box-shadow 的扩散部分会突破父容器边界，在 flex/grid 布局中造成错位，尤其 Safari 下表现不稳定。
立即学习“前端免费学习笔记（深入）”；
常见问题场景：
- 卡片用
display: flex包裹图片，但外层没设overflow: hidden→ 悬浮时右侧阴影被截断或压到隔壁卡片 - 图片用
object-fit: cover且宽高比不匹配 → 阴影从裁剪区边缘溢出，视觉上像“光从图里漏出来”
稳妥做法：给卡片最外层容器（比如 <div class="card">）加上 overflow: hidden 和 border-radius，让发光自然收束。
响应式下阴影尺寸怎么适配不同屏幕
不能写死像素值。小屏手机上 16px 光晕显得太重，大屏又不够显眼。用相对单位更可靠：
- 用
em：基于当前字体大小缩放，适合图文混排卡片 - 用
vw：比如box-shadow: 0 0 calc(0.5vw + 2px) rgba(...)，兼顾基础值和视口比例 - 媒体查询兜底：在
@media (max-width: 768px)里把模糊半径减半、描边宽度降到2px
示例：
@media (max-width: 768px) {
.card-img:hover {
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.2),
0 0 8px rgba(59, 130, 246, 0.3);
}
}
为什么 hover 发光有时闪烁或跳动
本质是重绘触发时机问题。常见原因有：
- 卡片含
transform: scale()动画 → 和box-shadow同时触发 repaint，GPU 渲染冲突 - 图片加载未完成就 hover → 尺寸突变导致阴影重算，视觉跳动
- CSS 中用了
will-change: transform却没配transform: translateZ(0)→ 浏览器误判渲染层
解决方法很直接：
给卡片加 will-change: box-shadow（仅 hover 前），或统一用 transform: translateZ(0) 强制硬件加速；图片务必设 width/height 属性或使用 aspect-ratio 占位，避免加载抖动。
真正难调的其实是发光颜色和背景的动态适配——比如暗色模式下蓝色光变灰紫，需要配合 @media (prefers-color-scheme: dark) 单独定义 box-shadow 值，这点容易被忽略。
