blur()

**blur()** CSS 函数 将 高斯模糊 应用于输入图像。其结果是 <filter-function>。

试一试

语法

blur() 函数将高斯模糊应用于应用它的元素。

css
blur(radius)

参数

radius

模糊半径，指定为 <length>。它定义了高斯函数的标准差值，即屏幕上多少像素彼此混合；因此，较大的值会产生更多的模糊。值为 0 则保持输入不变。 插值 的初始值为 0。百分比值无效。

使用像素和 rem 设置模糊

css
blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

SVG 滤镜

SVG <feGaussianBlur> 滤镜元素也可用于模糊内容。滤镜的 stdDeviation 属性最多接受两个值，可以创建更复杂的模糊值。要创建等效的模糊，我们为 stdDeviation 包含一个值。然后可以通过 ID 引用此 SVG 效果

html
<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

以下声明产生相同的效果

css
filter: blur(1.1px);
filter: url(#blur11); /* with embedded SVG */
filter: url(folder/fileName.svg#blur11); /* external svg filter definition */

示例

此示例显示了三张图像：应用了 blur() 滤镜函数的图像、应用了等效 SVG 模糊函数的图像以及用于比较的原始图像

css
.filter {
  filter: blur(3.5px);
}
html
<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

规范

规范
滤镜效果模块级别 1
# funcdef-filter-blur

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅