Safari 12 及更早版本中 drop-shadow() 无效，因其仅部分实现 CSS Filter Effects 规范，解析但不触发渲染；需降级为 box-shadow 或伪元素模拟，且须注意 overflow、颜色格式及动态切换等兼容细节。
低版本 Safari（特别是 iOS 12 及更早、macOS Safari 12.1 及之前）对 filter: drop-shadow() 支持不完整，直接使用会静默失效或渲染异常——不是加前缀就能解决，必须降级为 box-shadow 或伪元素模拟。
drop-shadow() 在 Safari 12 及更早版本中为什么无效？
根本原因不是语法错误，而是 Safari 在该版本中仅部分实现了 CSS Filter Effects Level 1 规范：drop-shadow() 函数被解析但未真正触发渲染管线。实测中它既不报错，也不画出阴影，连 console.log(getComputedStyle(el).filter) 都可能返回空字符串。
关键限制点：
- Safari 12.1 才开始稳定支持
drop-shadow()；iOS 12.0–12.1 存在大量设备级差异（如 iPhone 6s 上部分 WebView 完全忽略） -
-webkit-filter: drop-shadow(...)在 Safari 12 之前是无效的——这个前缀只对旧版blur()、grayscale()生效，不延伸到drop-shadow - 即使加了
will-change: filter或transform: translateZ(0)，也无法唤醒该函数
如何安全降级到 box-shadow？
当目标用户包含 iOS 12 或 macOS Safari 12.0 用户时，box-shadow 是唯一可靠 fallback。但它无法贴合 PNG/SVG 的 Alpha 边缘，所以得配合结构调整：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 对纯色块、圆角卡片等规则形状：直接用
box-shadow: 0 2px 8px rgba(0,0,0,0.12)，无需前缀（Firefox 4+、Chrome 10+、Safari 5.1+ 均原生支持） - 对需要贴合轮廓的图标或头像：把
<img src="icon.png">包进一个<div class="shadow-wrapper">，给 wrapper 加box-shadow，再设border-radius: 50%和overflow: hidden模拟圆形裁剪 - 避免在
box-shadow中混用inset或大 spread 值——iOS Safari 对 inset 渲染不稳定，且 spread 在旧版中常被忽略
用伪元素模拟 drop-shadow 的最小可行方案
这是兼容性最广、控制最细的方式，适用于所有 Safari 版本（包括 iOS 9.3），且能逼近真实 Alpha 投影效果：
.drop-shadow-host {
position: relative;
/* 主内容正常渲染 */
}
.drop-shadow-host::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
right: 0;
bottom: 0;
border-radius: inherit;
background: rgba(0,0,0,0.12);
z-index: -1;
filter: blur(4px);
transform: translateZ(0); /* 强制 GPU 合成，防 Safari 闪动 */
}要点说明：
-
::before必须与主内容同级，不能嵌套在子容器里 -
transform: translateZ(0)是 Safari 旧版中防止伪元素在滚动/动画中消失的关键 -
filter: blur(4px)模拟模糊，比反复重绘drop-shadow更稳定，且无 Alpha 解析依赖 - 若主元素有
border-radius，伪元素也需同步设置，否则阴影边缘会露白
真正容易被忽略的兼容细节
很多人花时间调参数，却栽在结构和上下文上：
- 父容器设了
overflow: hidden—— 即使你用了伪元素，阴影也会被裁掉；必须保证伪元素的绘制区域完全在父容器 content box 内，或改用overflow: visible+position: relative - 用
hsla()替代rgba()在颜色值里（如hsla(0,0%,0%,0.12)），旧版 Safari 对rgba()在滤镜中的解析更易出错 - 动态切换时（比如 hover 或 JS 控制显示），不要直接 toggle
filter，而应通过 class 切换，并确保 class 中同时包含transform和will-change声明，否则 Safari 可能跳过重绘
