直接加box-shadow渐变色失效，因bootstrap 4卡片默认overflow: hidden裁剪阴影；解决需改overflow为visible或用position: relative+::before伪元素模拟外发光。
为什么直接用 box-shadow 加渐变色会失效
Bootstrap 4 的卡片（.card）默认有 overflow: hidden，而渐变发光本质依赖多层 box-shadow 模拟，一旦外层阴影被裁剪，就看不到“光晕”效果。这不是 CSS 写错了，是容器截断了渲染区域。
解决思路只有两个：要么改卡片的溢出行为，要么把发光效果“托”到卡片之外渲染。前者简单但可能破坏圆角或内容布局；后者更稳妥，用伪元素模拟外边框。
用 ::before 伪元素实现悬浮渐变发光边框
核心是绕过 overflow: hidden 限制，把发光层画在卡片容器之外。需要给卡片加 position: relative，再用绝对定位的伪元素撑开视觉边界。
- 必须给卡片添加
position: relative和z-index: 1（否则伪元素会被其他内容遮盖） -
::before设置content: ""、position: absolute、inset: -8px（负值决定光晕厚度） - 用
background: linear-gradient(45deg, #6a11cb, #2575fc)配合filter: blur(12px)模拟发光，而不是依赖box-shadow - 为避免干扰鼠标事件，加
pointer-events: none
.card-glow:hover::before {
content: "";
position: absolute;
inset: -8px;
z-index: -1;
background: linear-gradient(45deg, #6a11cb, #2575fc);
filter: blur(12px);
pointer-events: none;
}
box-shadow 方案能用吗？哪些参数要特别注意
可以，但仅限于卡片本身没设 overflow: hidden 或你已手动覆盖它。Bootstrap 4 默认卡片有该样式，所以得先重置：
- 必须显式写
.card { overflow: visible !important; }，否则任何box-shadow都会被裁掉 - 渐变发光靠多层阴影叠加：
box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.3), 0 0 16px 4px rgba(106, 17, 203, 0.4), ... - 注意第二层开始用
rgba()控制透明度，纯hex无法体现渐变过渡感 - 移动端慎用，过多模糊阴影会导致滚动卡顿，尤其 iOS Safari
兼容性与性能容易被忽略的点
Firefox 对 filter: blur() 在伪元素上的支持比 Chrome 晚一两个版本，如果需兼容 Firefox 70 以下，优先选 box-shadow 方案并降级为单色光晕。
另外，blur() 值超过 16px 在低端安卓机上可能出现渲染撕裂；建议用媒体查询做降级：
@media (max-width: 768px) {
.card-glow:hover::before {
filter: blur(6px);
}
}
真正难的不是写出效果，而是判断什么时候该用伪元素、什么时候该改 overflow——取决于你是否能动 Bootstrap 的基础卡片类，以及是否接受在卡片上额外加一层 DOM 层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
