如何使用 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(...) 属性需要根据实际情况进行调整，以达到最佳效果。