在 CSS 中设置模糊距离

在 CSS 中，可以通过 blur() 函数来实现模糊效果。这个函数的作用是给元素设置模糊半径，实现模糊效果。

使用语法

blur() 函数的语法如下：

selector {
    filter: blur(value);
}

其中，selector 是需要添加模糊效果的元素选择器；value 是模糊半径的取值，可以是一个长度值（如 px）或一个百分比，也可以是一个无单位的数字。值越大，模糊效果越明显。

示例

下面是一个例子，展示了如何使用 blur() 函数实现模糊效果：

img {
    filter: blur(5px);
}

这个例子中，给图片添加了一个模糊半径为 5 像素的模糊效果。你可以根据实际情况调整模糊半径的值，以达到最佳的效果。

兼容性

需要注意的是，blur() 函数并不是所有的浏览器都支持的。以下是一些常见浏览器的兼容性情况：

• Chrome：支持
• Safari：支持
• Firefox：支持
• Edge：支持
• Internet Explorer：不支持

因此，在使用 blur() 函数时，需要对浏览器的兼容性进行检测，并考虑使用其他的兼容方案。

总结

在 CSS 中，使用 blur() 函数可以给元素添加模糊效果。它的语法非常简洁清晰，但需要注意浏览器的兼容性问题。