filter 属性在 Chrome 18–52 和 Safari 6–9 中不生效，因渲染引擎未启用 CSS Filter Layout 特性，blur() 和 drop-shadow() 尤其易被忽略或渲染异常；建议对 Chrome 添加兼容性处理。
filter 属性在旧版 Chrome 和 Safari 中不生效
Chrome 18–52、Safari 6–9 默认禁用或部分支持 filter，尤其 blur()、drop-shadow() 在这些版本里常被忽略或渲染异常。这不是写法错误，是渲染引擎未启用 CSS Filter Layout 特性导致的。
实操建议：
- 对 Chrome -webkit-filter 前缀，且不能只写前缀——标准属性要跟在后面，否则新版浏览器可能因解析顺序问题跳过
-
filter: blur(2px);必须写作：img {<br> -webkit-filter: blur(2px);<br> filter: blur(2px);<br>} - 避免在
@supports (filter: blur(0))中测试，旧 Safari 会误报支持；改用 JavaScript 检测：window.CSS && CSS.supports('filter', 'blur(0)')
IE 和 Edge 12–15 完全不支持 filter，但有可用 fallback
IE 全系（包括 IE11）和 Edge 12–15 把 filter 当作无效声明，连前缀也不认。这时候不能靠 polyfill 补渲染，得换思路：用 SVG 滤镜内联或 Canvas 合成替代视觉效果。
实操建议：
- 对需要模糊/阴影的图片，准备一张预处理的 PNG 作为降级：
.card img {<br> background: url("card-blurred-fallback.png");<br> background-size: cover;<br>} - 若必须动态模糊，用
canvas+ctx.filter = "blur(2px)"（仅 Chrome/Firefox 支持），再 fallback 到 CSSopacity+transform: scale(1.02)模拟轻微虚化感 - 不要依赖
filter: grayscale(1)做灰度图兼容——IE 下可改用svg filter内联定义，或直接用已导出的灰度 PNG
drop-shadow() 和 box-shadow 混用时边缘发虚或偏移
drop-shadow() 是滤镜，作用于元素整个 Alpha 通道；box-shadow 只描边盒模型。两者叠加时，旧版 WebKit 渲染顺序混乱，会导致阴影变淡、错位甚至消失。
实操建议：
- 同一元素上禁止同时写
box-shadow和filter: drop-shadow()——选其一。优先用drop-shadow()，它能绕过盒模型限制，给图片/SVG 内部内容投阴影 - 若需兼容 IE，统一用
box-shadow，并用transform: translateZ(0)强制硬件加速，减少边缘锯齿 - 注意
drop-shadow(x y blur color)的blur值单位是 px，不接受em或rem，否则整条声明会被忽略
filter 性能开销大，滚动/动画中容易卡顿
filter 是逐像素合成操作，尤其 blur() 在中低端设备上极易触发重绘（repaint）而非复合（composite），滚动时帧率骤降。这不是 bug，是设计使然。
实操建议：
- 避免在
:hover或@keyframes中动态切换blur()值——改为用transform: scale()+opacity模拟“聚焦/失焦”感 - 对列表项批量加滤镜，用
will-change: filter提前提示，但仅限真正需要动画的元素，滥用反而拖慢初始化 - 移动端慎用
filter: contrast()或saturate()配合position: fixed，某些 Android WebView 会直接崩溃
实际项目里最常被漏掉的是：Safari 9.1+ 虽支持 filter，但对 SVG 元素内的 filter 应用有 bug，必须把滤镜定义移到 <defs></defs> 外层，并用 url(#id) 显式引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
