HTML5 本身不提供景深滤镜能力，所谓“景深”需通过 CSS filter 分层模糊、canvas 径向模糊模拟或 WebGL 深度缓冲实现，但均非原生支持，且依赖人工分层或额外深度信息。
HTML5 没有原生景深滤镜
直接说结论：HTML5 本身不提供「景深（depth of field）」这类基于深度图的滤镜能力。所谓「HTML5 景深滤镜」，实际是靠 CSS filter + canvas 或 WebGL 模拟，且效果有限——它无法真正感知 3D 空间深度，只能靠人工分层或预设模糊梯度伪造。
用 filter: blur() 做简易景深分层
这是最常用、兼容性最好的“类景深”手法，适用于静态图文或简单动效场景：
-
blur()值需配合元素层级控制：前景（主体）blur(0)，中景blur(2px)，背景blur(8px)，但必须手动切图或用多个div分层 - 不能自动识别“哪部分该虚化”，所有模糊都是均匀的，边缘无过渡衰减，容易显得生硬
- 在高 DPR 屏幕上，
blur(1px)可能完全不可见，建议从blur(2px)起调 - 示例：
.foreground { filter: blur(0); } .midground { filter: blur(3px); } .background { filter: blur(10px); }
用 canvas 实现径向模糊模拟（伪景深）
当需要以某点为中心渐进虚化（比如聚焦人物眼睛），canvas 的逐像素操作比纯 CSS 更可控：
- 核心思路：遍历像素，按到焦点坐标的距离计算模糊半径，再用高斯采样叠加
- 性能敏感：全图实时计算开销大，建议限制画布尺寸 ≤ 800×600，或只对 ROI 区域处理
- 注意 canvas 像素数据是 RGBA 数组，
getImageData()后需手动实现模糊逻辑，没有现成depthBlur()API - 常见坑：未启用
imageSmoothingEnabled = false会导致缩放时额外插值，干扰模糊梯度
真景深必须依赖 WebGL + 深度缓冲
只有 WebGL（或 WebGPU）能访问深度信息，从而做基于 z-buffer 的物理合理景深：
立即学习“前端免费学习笔记（深入）”；
- 需渲染两遍：第一遍输出深度纹理（
DEPTH_COMPONENT），第二遍用 fragment shader 采样深度值决定blurRadius - Three.js 用户可用
EffectComposer+DepthOfFieldPass，但要注意该 Pass 默认依赖相机layers和正确设置material.depthTest = true - 移动端兼容风险高：iOS Safari 对浮点纹理支持不一，
WEBGL_depth_texture扩展需显式检查 - 不是「加个 CSS 就行」的事——它本质是完整渲染管线改造，和「HTML5 滤镜」已无关系
真正卡住多数人的，不是怎么写 shader，而是没意识到：景深效果的前提是已有可信的深度信号。网页里一张 <img alt="html5滤镜怎样模拟景深_html5景深滤镜css技巧【技巧】" > 或几个 <div> 根本没有深度，所有“景深”都是人为约定或估算出来的。</div>
