safari 15.3 及更早版本完全忽略 background-blend-mode 声明，非降级为 normal；主因是多层背景未用单条 background 声明书写、各层 background-origin/background-clip 不一致、渐变中混用 rgba() 与 #rrggbbaa 等。
background-blend-mode 在 Safari 15.3 及更早版本被完全忽略
不是降级为 normal，而是整条声明被浏览器跳过——DevTools 里该属性直接灰掉或标为 invalid。iOS 15 / macOS Monterey 及更早系统（包括初代 iPhone SE）都运行 Safari 15.3 或更低版本，此时无论你写多少层背景、用什么 blend 值，效果都为零。
最隐蔽的失效原因：background-color 和 background-image 分开写
这是实际项目中最常踩的坑。Safari（及其他浏览器）只把逗号分隔的同一 background 声明里的内容识别为“多层背景”。一旦拆开：
background-color: #ff6b6b;background-image: url("pattern.png");
→ 浏览器只保留最后一条生效的声明（通常是 background-image），background-blend-mode 因缺少第二层而彻底失效。
正确写法必须是单条声明：
.box {
background: #ff6b6b, url("pattern.png");
background-blend-mode: overlay;
}
多层叠加时 background-origin 和 background-clip 不一致
即使你写对了逗号分隔，只要某一层设了 background-origin: border-box，其余层用默认的 padding-box，整个混合就会静默退回到 normal —— 浏览器拒绝计算 origin 不同的图层叠加。
实操建议：
- 所有层统一用
background-origin: padding-box（默认值，可不写） - 所有层统一用
background-clip: border-box或padding-box，不要混用 - 避免给某一层单独加
background-size或background-position而其他层不设，否则尺寸错位导致视觉上“没混合”
渐变颜色用 rgba() 导致旧 Safari 解析失败
在 linear-gradient() 的 color stop 中写 rgba(255,0,0,0.4)，Safari 15.3 及更早版本对嵌套透明解析不稳定，可能整层渐变不渲染或透叠异常。
替代方案：
- 统一用十六进制带 alpha 格式：
#ff000044（注意是 8 位，非#ff000066这种 6 位） - 避免在渐变中混用
rgba()和#rrggbbaa，保持格式一致 - 若需动态控制，CSS 自定义属性不能直接用于
background-blend-mode值，它只接受关键字如multiply
@supports 检测能兜底——Safari 15.2+ 会返回 true，但渲染仍失效。兼容性要求高时，静态合成图或 Canvas 是更可控的选择。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
