随手记录一下CSS模糊白边的处理

常规写法

.shuo {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-image: url("https://alioss.xiamoqwq.com/xiamo/WordPress/2022/02/20220226074116855.jpg");
  background-size: cover;
  background-position: bottom;
  filter: blur(20px);
}

将滤镜单独成另一个div

<div class="shuo">
  <div class="background-filter"></div>
</div>

.shuo {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-image: url("https://alioss.xiamoqwq.com/xiamo/WordPress/2022/02/20220226074116855.jpg");
  background-size: cover;
  background-position: bottom;
  z-index: 1;

  .background-filter{
    z-index: -1;
    $size: 100%;
    height: $size;
    width: $size;
    pointer-events: none;
    backdrop-filter: blur(20px);
  }
}