模糊 CSS

在网站设计中，我们常常需要使用一些视觉效果来吸引用户的注意力，例如模糊效果。模糊效果可以让页面的元素看起来更加柔和，而不是过于生硬。在 CSS 中，我们可以使用 filter 属性来实现模糊效果。

filter 属性

filter 属性可以通过一系列 CSS 函数来调整元素的可视化效果。其中，blur() 函数可以用来实现模糊效果。该函数可以接受一个参数，表示模糊的程度。

/* 将元素模糊 5 个像素 */
.element {
  filter: blur(5px);
}

兼容性

在使用 filter 属性的时候，需要注意兼容性问题。根据 Can I Use 网站的数据，目前大部分浏览器都已支持 filter 属性，但是一些老旧的浏览器还是不支持。因此，如果你需要支持老旧浏览器，最好提供一个备选方案。例如，你可以使用 JavaScript 或 SVG 来实现模糊效果。

代码片段

以下是一个示例代码片段，用来演示如何在 CSS 中应用模糊效果。

<div class="wrapper">
  <img src="https://picsum.photos/id/1/500/350" alt="demo image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

/* 将图片模糊 5 个像素 */
.wrapper img {
  filter: blur(5px);
}

/* 给段落添加一些间距 */
.wrapper p {
  margin-top: 20px;
}

该示例代码会将图片模糊 5 个像素，并且在图片下方添加一个段落，用于演示模糊效果。