html5滤镜怎么加阴影效果_html5阴影滤镜应用教程【技巧】

drop-shadow() 作用于元素像素轮廓（含透明区），box-shadow 仅围绕矩形盒模型；前者需 filter 属性，后者为独立属性；drop-shadow() 对 PNG/SVG 更真实但兼容性差，box-shadow 兼容性好但形态受限。

filter: drop-shadow() 和 box-shadow 的区别在哪

drop-shadow() 是 CSS Filter 滤镜函数，作用于元素的实际像素轮廓（包括透明区域），而 box-shadow 只围绕元素的矩形盒模型（border-box）投阴影。比如一个带透明背景的 PNG 图标，用 drop-shadow() 能让锯齿边缘或镂空部分也带阴影，box-shadow 则只在方框四角出影。

• drop-shadow() 必须配合 filter 属性使用，如 filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3))
• 它不触发硬件加速，但对复杂图形（如 SVG 或含透明度的 canvas 输出）更真实
• 注意：IE 完全不支持，Edge 16+ 开始支持；Safari 9.1+ 支持，但旧版 Safari 对多层 drop-shadow() 渲染有偏移 bug

Canvas 2D 上怎么给图形加阴影（不是 CSS）

Canvas 自身提供原生阴影控制 API，和 CSS 滤镜无关，但常被误认为“HTML5 滤镜”的一部分：

• 设置 ctx.shadowOffsetX / ctx.shadowOffsetY 控制偏移
• ctx.shadowBlur 控制模糊程度（值为 0 时无模糊，纯硬边）
• ctx.shadowColor 设颜色（支持 rgba）

ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 6;
ctx.shadowColor = 'rgba(0,0,0,0.4)';
ctx.fillRect(50, 50, 100, 60); // 这个矩形会带阴影

⚠️ 注意：阴影设置是全局状态，画完记得重置（如设 shadowColor = 'transparent'），否则后续所有绘制都会带影。

SVG 元素加阴影该用 filter 还是

SVG 中推荐直接用 （SVG Filter Primitive），它比通用 drop-shadow() 更可控、性能更好，且兼容性更稳（Chrome 52+/Firefox 4+/Safari 6+）：

PNG Maker

利用 PNG Maker AI 将文本转换为 PNG 图像。

下载

立即学习“前端免费学习笔记（深入）”；

• stdDeviation 相当于 CSS 的 blur 值，但单位是 SVG 坐标空间，非像素
• flood-color 和 flood-opacity 合起来等效于 rgba() 颜色
• 不要用 filter: url(#shadow) 写在 SVG 外部样式里再引用——部分旧安卓 WebView 会失效，直接写在元素 filter 属性中更可靠

为什么给 video 或 WebGL canvas 加 drop-shadow() 没反应

因为 filter 对 和 WebGL 渲染的 在多数浏览器中默认被禁用或降级处理：

• Chrome/Edge：对 应用 filter 会触发合成层，但可能因硬件解码绕过滤镜链
• Firefox：对 WebGL canvas 的 filter 支持不稳定，常回退为无效果
• 解决路径只有两个：
  • 把 video 帧 draw 到普通 2D canvas，再对该 canvas 元素加 filter
  • 用 WebGL shader 自行实现阴影（如通过深度图或 shadow map），这已超出 HTML5 滤镜范畴

真正要加阴影时，别指望浏览器自动把滤镜塞进视频管线里——那不是“没写对”，是渲染管线根本没给你这个入口。