SVG滤镜入门：feGaussianBlur与feDropShadow的视觉效果

时间：2026-06-24 09:49:46 编辑：袖梨来源：一聚教程网

SVG滤镜是对CSS视觉控制的升级，通过feGaussianBlur和feDropShadow等原语实现可拆解、可控的阴影与模糊效果。

SVG滤镜不是CSS的替代品，而是对视觉控制力的升级。它让你能真正“拆解”一个效果——比如阴影，不再是一行drop-shadow()完事，而是明确告诉浏览器：先取轮廓、再偏移、再模糊、最后叠加。这种可拆解性，正是feGaussianBlur和feDropShadow的价值起点。

feGaussianBlur：模糊不是“糊”，是可控的柔焦

它用高斯函数对图像做加权平均，生成自然过渡的模糊边缘。关键参数只有stdDeviation（标准差），数值越大越虚，但不是线性增长——2和4的视觉差异比4和6更明显。它默认作用于整个元素（in="SourceGraphic"），但常配合in="SourceAlpha"只模糊透明通道，专为阴影打基础。

单独使用时，适合做毛玻璃背景或弱化干扰元素
搭配result属性可输出中间结果，供后续滤镜节点调用
移动端慎用大值（>8），避免渲染卡顿；建议结合will-change: filter做性能提示

feDropShadow：一行代码，三层逻辑

它不是“简化版阴影”，而是一个封装好的三步流水线：feOffset → feGaussianBlur → feMerge。所以它的四个属性dx、dy、stdDeviation、color，分别对应偏移方向、模糊软硬、颜色浓度——没有隐藏行为，改哪项就动哪块。

必须嵌套在<filter>内，不能独立存在
stdDeviation支持双值写法（如"2 4"），实现横向纵向不同强度的模糊
颜色支持rgba()，透明度直接控制阴影“厚度”，比CSS的drop-shadow()更直观

组合使用：从单层到立体感

单个feDropShadow只能出一层影子。要模拟真实光照（比如顶部高光+底部浓影），就得并列多个feDropShadow，或拆解成原语手动组合。例如：

先用feGaussianBlur in="SourceAlpha"生成纯黑软边轮廓
再用feOffset dx="-2" dy="-2"拉出浅色高光
最后feComposite operator="over"把高光叠在主影上

这种链式结构让阴影有纵深，也方便用JS动态改dx模拟光照角度变化。

实际接入：HTML元素也能用

不用把所有内容重写成SVG。给任意HTML元素（比如<div>或<img>）加上CSS：filter: url(#my-filter);，就能复用SVG里定义的滤镜。注意两点：

<svg>定义部分建议放在页面顶部或<head>里，设width="0" height="0" style="position:absolute"隐藏但保功能
滤镜区域默认裁剪，若阴影被截断，需调整<filter>的x、y、width、height属性（常用"-20%" "140%"留足空间）

推荐专题

最新下载

热门教程

SVG滤镜入门：feGaussianBlur与feDropShadow的视觉效果

feGaussianBlur：模糊不是“糊”，是可控的柔焦

feDropShadow：一行代码，三层逻辑

组合使用：从单层到立体感

实际接入：HTML元素也能用

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程