如何在 CSS 中设置模糊距离？

模糊距离在设计中是一个常用的效果，可以让某个元素看起来更柔和、更具有层次感，同时也可以实现很多有趣的效果。在 CSS 中，设置模糊距离是十分容易的，本文将向你介绍如何完成这个操作。

使用 box-shadow 实现模糊效果

在 CSS 中，我们可以使用 box-shadow 属性实现模糊效果。box-shadow 属性可以添加一个阴影效果到一个元素中，并且还可以指定这个阴影的颜色、大小和模糊程度。以下是一个简单的例子：

.box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

在这个例子中，我们设置了一个大小为 10px 的黑色半透明阴影。第一个参数是水平偏移量，第二个参数是垂直偏移量，第三个参数是模糊半径，最后一个参数是阴影颜色和透明度。

实现其他形状的模糊效果

除了矩形之外，我们还可以使用其他形状来实现模糊效果。在 CSS 中，使用 filter 属性可以实现很多有趣的效果，其中就包括模糊效果。

以下是一个将图片模糊的例子：

img {
  filter: blur(5px);
}

在这个例子中，我们使用了 blur() 函数来指定模糊半径，这里设置为 5px。

结论

CSS 中实现模糊效果是非常容易的，我们可以使用 box-shadow 或者 filter 来完成这个操作。除了简单的模糊效果之外，我们也可以实现其他形状的模糊效果，这些效果可以用于提升页面的视觉质量，同时也可以为网站赋予更多的创意和乐趣。