父容器overflow: hidden是Safari中box-shadow“消失”最常见原因，因其硬裁切绘制在盒模型外部的阴影；验证可加outline，解法为改overflow: visible或给卡片设position: relative与z-index。
box-shadow在Safari中“消失”最常见原因是父容器overflow: hidden
卡片本身有box-shadow，但真机或Safari DevTools里看不见——八成是上层容器（比如.row、.container-fluid甚至自定义div.wrapper）设了overflow: hidden。box-shadow绘制在盒模型外部，会被祖先的overflow硬裁切。
快速验证：给疑似父容器加outline: 1px solid red，看阴影是否刚好卡在outline边缘。稳妥解法只有两个：
– 删掉或改为overflow: visible；
– 若不能改结构，给卡片加position: relative; z-index: 1，并确认没被兄弟元素更高z-index遮住。
特别注意.card-group：它内部强制overflow: hidden，想保留阴影必须换布局，用.row + .col或Flex替代。
transition未声明导致:hover阴影无动画或直接不生效
写了.card:hover { box-shadow: ... }却没反应？Bootstrap 5的.card默认不带transition，浏览器要么“啪”一下跳变，要么在旧Safari里直接忽略变化。
必须显式在常态规则里加过渡声明：
– 正确：.card { transition: box-shadow 0.2s ease-in-out; }（写在:hover外）
– 错误：transition: all（会连边框、背景一起动，干扰焦点）
– 错误：只写.card:hover { transition: ... }（无效）
选择器权重不够时，别用泛泛的:hover，坚持用.card:hover，避免被Bootstrap默认样式压制。
Safari 12–14对box-shadow的渲染异常不是CSS写错了
在Safari 12–14中看到阴影带虚线边框、颜色发灰、或部分模糊半径失效——这不是你漏写了什么，而是旧版WebKit引擎错误解析box-shadow属性。
加-webkit-box-shadow前缀不仅没用，还可能触发CSS解析中断（Safari 15+已移除对该前缀的支持）。真正有效的做法是：
– 复用Bootstrap 5原生shadow类的值：0 0.5rem 1rem rgba(0, 0, 0, 0.15)
– 想加深？只调alpha值（如0.2），别乱改模糊半径
– 深色背景慎用rgba(0,0,0,0.2)，改用rgba(0,0,0,0.08)或var(--bs-gray-800)
别套shadow-lg的值（0 1rem 3rem），它在卡片上容易浮夸，尤其移动端。
移动端点按不触发:hover是规范行为，不是bug
iOS Safari和Android Chrome真机上，单次点击不会触发:hover——这是W3C规范，不是渲染缺陷。如果你靠“点一下显阴影”来暗示可交互，纯CSS方案必然失效。
底线方案：
– 给卡片加tabindex="0"使其可聚焦
– 写.card:focus { box-shadow: ... }，兼顾键盘与触摸
– 别信@media (hover: hover)：iOS真机常返回false，白写
真正容易翻车的地方不在代码，在布局容器——写了三行CSS却发现阴影被裁、上移后文字模糊、悬停后边缘露白，大概率是.card-group、h-100或align-items-start惹的祸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
