视频滤镜面板核心是用JavaScript动态拼接完整filter字符串并全覆盖更新，否则亮度/饱和度等参数会丢失；overflow:hidden、内联标签未设display、position:fixed、跨域CORS及Safari兼容性等问题会导致filter静默失效。
直接说结论：视频滤镜面板 ≠ 把一堆 filter 值塞进下拉框，核心是用 JavaScript 动态拼接合法的 filter 字符串，并确保每次更新都覆盖完整值——漏掉一个函数，之前调好的亮度/饱和度就全丢了。
为什么 video 元素加 filter 有时没反应
不是代码写错了，而是这些地方在“静默拦截”：
-
overflow: hidden父容器会裁掉blur()或drop-shadow()的溢出像素，哪怕只模糊1px，边缘也看不见 - 元素是内联标签（如
<span>）且没设display: inline-block或block，filter不生效 - 用了
position: fixed+filter，Safari 13–15.3 有渲染异常，画面可能错位或闪烁 - 图片或视频跨域但未配 CORS，
filter能显示，但后续若用canvas读取会直接报SecurityError
怎么用 range 滑块实时控制多个滤镜参数
关键不是监听单个滑块，而是维护一个参数对象，再统一生成字符串。否则容易出现“调了对比度，亮度却回退到 1”这类问题：
- 每个滑块用
dataset.filter标记对应函数名，比如<input type="range" data-filter="brightness"> - 监听所有滑块的
input事件，读取当前值并存入对象：{ brightness: 1.2, contrast: 0.9, saturate: 1.1 } - 拼接时按固定顺序输出，例如
blur(0px) brightness(1.2) contrast(0.9) saturate(1.1)，空格分隔，不能换行 - 数值必须带单位：
blur(2px)、hue-rotate(45deg)、grayscale(80%)；contrast(1.2)这类无单位小数可以，但别混成contrast(120%)
video 滤镜面板里 drop-shadow() 为什么总在最后
drop-shadow() 不是给视频“加阴影”，而是对整个滤镜链的最终输出结果投一个基于 Alpha 通道的阴影。它必须放在字符串末尾，否则会被前面的 blur() 或 grayscale() 干扰：
立即学习“前端免费学习笔记（深入）”；
- 写成
filter: drop-shadow(2px 2px 4px #000) blur(1px)→ 阴影本身被模糊，边缘发虚 - 正确写法：
filter: blur(1px) contrast(1.1) drop-shadow(2px 2px 4px #000) - Safari ≤12.1 完全不支持
drop-shadow()，得用@supports (filter: drop-shadow(0 0 0 #000))包裹降级逻辑 - 移动端部分旧 WebView 对
drop-shadow()渲染异常，建议优先用box-shadow模拟简单外阴影
性能卡顿不是 JS 写得烂，是 filter 没升 GPU 层
拖动滑块时视频画面掉帧，大概率不是计算慢，而是浏览器在 CPU 上做软件渲染：
- 给
video元素加will-change: filter，只在交互前触发，避免常驻开销 - 或者用
transform: translateZ(0)强制创建合成层，让filter计算走 GPU - 慎用
blur()+hue-rotate()同时动画，两者都是高开销函数，叠加易卡顿 - 测试时打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，如果大片绿色闪，说明每帧都在重绘，
filter没走硬件加速
最易被忽略的一点：滤镜组合顺序不是“谁写在前面谁优先”，而是“谁写在前面谁先处理像素”。先 grayscale() 再 blur() 和反过来，模糊区域的色彩信息量不同，最终模糊质感差异明显——这不是 bug，是设计使然。
