filter: blur(3px);

This CSS property applies a Gaussian blur to an element, creating a fuzzy or blurred effect. The value "3px" specifies the amount of blur to be applied to the element. The higher the value, the more the element will be blurred.

Example:

img {
  filter: blur(3px);
}

This code applies a blur effect to all images on the page, with a blur radius of 3 pixels.

相关问题

filter: blur背景色模糊

filter: blur是CSS中一个属性，可以用来给元素的背景色模糊效果。通过在CSS中设置该属性的值为blur，可以实现背景模糊的效果。

在使用filter: blur时，需要注意以下几点：

1. 语法：filter: blur(值)。其中值可以是像素(px)、百分比(%)或CSS变量。

2. 值的范围：值越大，背景色的模糊程度越高。一般来说，模糊半径在0到10之间比较常见，但可以根据具体需要进行调整。

3. 兼容性：filter: blur属性在不同浏览器中的兼容性不同，部分旧版本的浏览器可能不支持。因此，在使用时最好加上浏览器前缀，以提高兼容性。

4. 使用场景：filter: blur可以用于任何具有背景色的元素，比如div、图片等。它可以用来创建视觉上的混沌感或模糊效果，使元素看起来更加柔和和模糊。

5. 注意事项：filter: blur只会对元素的背景色进行模糊处理，而不会对其他内容产生影响。如果想要整体模糊效果，可以考虑将元素的内容放置在一个容器中，并对容器应用filter: blur。

总而言之，filter: blur是一种可以通过CSS实现元素背景色模糊效果的属性，通过调整模糊程度可以达到不同的视觉效果。但需要注意兼容性和使用场景，并通过浏览器前缀提高兼容性。

如何使用 CSS3 的 transform: scale() 和 translate() 等属性代替 filter: blur(500px)。

使用 CSS3 的 transform: scale() 和 translate() 等属性代替 filter: blur(500px) 是一个比较常见的技巧。可以使用以下步骤实现：

1. 创建一个父元素，设置其 position: relative;
2. 在父元素中创建一个子元素，设置其 position: absolute; top: 0; left: 0; right: 0; bottom: 0; 并设置需要模糊的背景图或者背景颜色；
3. 使用 transform: scale(...) 和 translate(...) 属性，将子元素放大并平移，使其填满父元素；
4. 最后，将子元素的 opacity 设置为 0.5，或者使用其他透明度值，以达到模糊效果。

具体代码如下所示：

<div class="blur-wrapper">
  <div class="blur-background"></div>
</div>

.blur-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.blur-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('your-image-url');
  /* or use background-color */
  transform: scale(1.5) translate(-50px, -50px);
  opacity: 0.5;
}

注意：transform: scale(...) 和 translate(...) 属性需要根据实际情况进行调整，以达到最佳效果。