过滤

drop-shadow()

使用 shadow 参数沿图像的轮廓生成阴影效果。阴影语法类似于 box-shadow，但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样，任何在 drop-shadow() 后的滤镜同样会应用在阴影上。

box-shadow

filter:drop-shadow()

完整代码

<template>
  <div class="container">
    <div class="left">
      <p>box-shadow</p>
      <img class="box-shadow-img" width="100%" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="firefox" />
    </div>
    <div class="right">
      <p>filter:drop-shadow()</p>
      <img class="drop-shadow-img" width="100%" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="firefox" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 400px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #fff;
  .left {
    text-align: center;
    width: 40%;
    .box-shadow-img {
      box-shadow: 0 0 5px #bfc;
    }
  }
  .right {
    text-align: center;
    width: 40%;
    .drop-shadow-img {
      filter: drop-shadow(0 0 5px #bfc);
    }
  }
}
</style>

backdrop-filter

应用场景：磨砂玻璃效果

backdrop-filter 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

Card

完整代码

<template>
  <div class="container">
    <div class="modal">Card</div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #f0f, #0ff);
  position: relative;
  &::before {
    content: '磨砂玻璃效果';
    font-size: 5rem;
    font-weight: 600;
    color: #ffffff;
  }

  .modal {
    position: absolute;
    width: 40%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    font-weight: 600;
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}
</style>