以往我们实现磨砂效果一般是用背景透明度和阴影来实现的，但这种效果给人看起来比较僵硬，也无法更加灵活的变更效果。
如今，filter属性可以实现磨砂效果，案例如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;}html {line-height: 1.5;font-size: 15px;font-weight: 400;}body {width: 100vw;min-height: 100vh;display: flex;justify-content: center;align-items: center;gap: 20px;font-family: "Exo", Arial, sans-serif;background: url("https://static.fedev.cn/sites/default/files/blogs/2021/2101/glassmorphism-css-11.jpeg")no-repeat center fixed;background-size: cover;color: #fff;}.card {min-height: 400px;width: 320px;border-radius: 8px;display: flex;flex-direction: column;align-items: center;}.card__media {height: 120px;width: 120px;border-radius: 50%;margin: 30px 0 20px 0;}.card__media img {max-width: 100%;height: 100%;border-radius: 50%;object-fit: cover;object-position: center;}.card__body {display: flex;flex-direction: column;align-items: center;color: #d5d5d5;font-size: 16px;font-weight: 600;letter-spacing: 0.7px;width: 100%;flex: 1;}.card__title {margin-top: 5px;}.card__subtitle {color: #c0c0c0;font-weight: 400;font-size: 14px;letter-spacing: 1px;margin-bottom: 15px;}.card__content {display: grid;width: 100%;min-height: 70px;grid-template-columns: repeat(2, 1fr);border-radius: 0 0 8px 8px;margin-top: auto;padding: 5px 0;}.card__content > div {display: flex;flex-direction: column;align-items: center;color: #d5d5d5;font-size: 16px;font-weight: 600;letter-spacing: 0.7px;}.followers {border-right: 2px solid rgba(255, 255, 255, 0.08);}.followers__number,.following__number {margin: 5px 0;}.followers__title,.following__title {color: #c0c0c0;font-weight: 400;font-size: 14px;letter-spacing: 1px;margin: 5px 0;}.card__action {display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 10px;}.card__button {background-color: #2c303a;border: none 0;color: #9b9dad;padding: 1rem 1.75rem;font-size: 1.2rem;transition: all 0.2s linear;border-radius: 4px;font-family: "Exo", Arial, sans-serif;display: inline-flex;justify-content: center;align-items: center;cursor: pointer;width: 85%;}.card__button:hover {color: #fff;background-color: #5a5f73;}.card__button:focus:not(:focus-visible) {outline: none;box-shadow: 0 0 0 3px #03a9f4d9;}.card__button:focus-visible {outline: none;box-shadow: 0 0 0 3px #03f4e0b8;}.card,.card__media,.card__content {position: relative;background: inherit;overflow: hidden;}.card::before,.card__media::before,.card__content::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;border-radius: 8px;z-index: 1;background: inherit;box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.2);filter: blur(10px);}.card > * {position: relative;z-index: 2;}.card__media img {top: 5%;right: 5%;bottom: 5%;left: 5%;position: absolute;z-index: 2;width: 90%;height: 90%;z-index: 2;}.card__media::before {box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.06);}.card__content::before {border-radius: 0 0 8px 8px;box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.06);}</style></head><body translate="no"><div class="card"><div class="card__media"><imgsrc="https://assets.codepen.io/1061/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1&width=80"alt="Airen"/></div><div class="card__body"><h3 class="card__title">Airen Liao</h3><h4 class="card__subtitle">Web Developer</h4><div class="card__action"><button class="card__button">View Profile</button></div><div class="card__content"><div class="followers"><div class="followers__number">405</div><h5 class="followers__title">Followers</h5></div><div class="following"><div class="following__number">85</div><h5 class="following__title">Following</h5></div></div></div></div></body>
</html>但是filter：blur设置磨砂效果，不仅会作用在自身元素上面，对子级同样生效，所以一般在自身元素上面实现自身效果同时要加上伪类
backdrop-filter属性出现后，磨砂效果就会更加逼真，并且设置磨砂效果对子级元素无任何影响，故简化了很多代码。
案例如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;}html {line-height: 1.5;font-size: 15px;font-weight: 400;}body {width: 100vw;min-height: 100vh;display: flex;justify-content: center;align-items: center;gap: 20px;font-family: "Exo", Arial, sans-serif;background: url("https://static.fedev.cn/sites/default/files/blogs/2021/2101/glassmorphism-css-11.jpeg")no-repeat center fixed;background-size: cover;color: #fff;}.card {min-height: 400px;width: 320px;border-radius: 8px;display: flex;flex-direction: column;align-items: center;}.card__media {height: 120px;width: 120px;border-radius: 50%;margin: 30px 0 20px 0;}.card__media img {max-width: 100%;height: 100%;border-radius: 50%;object-fit: cover;object-position: center;}.card__body {display: flex;flex-direction: column;align-items: center;color: #d5d5d5;font-size: 16px;font-weight: 600;letter-spacing: 0.7px;width: 100%;flex: 1;}.card__title {margin-top: 5px;}.card__subtitle {color: #c0c0c0;font-weight: 400;font-size: 14px;letter-spacing: 1px;margin-bottom: 15px;}.card__content {display: grid;width: 100%;min-height: 70px;grid-template-columns: repeat(2, 1fr);border-radius: 0 0 8px 8px;margin-top: auto;padding: 5px 0;}.card__content > div {display: flex;flex-direction: column;align-items: center;color: #d5d5d5;font-size: 16px;font-weight: 600;letter-spacing: 0.7px;}.followers {border-right: 2px solid rgba(255, 255, 255, 0.08);}.followers__number,.following__number {margin: 5px 0;}.followers__title,.following__title {color: #c0c0c0;font-weight: 400;font-size: 14px;letter-spacing: 1px;margin: 5px 0;}.card__action {display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 10px;}.card__button {background-color: #5a3a3e;border: none 0;color: #9b9dad;padding: 1rem 1.75rem;font-size: 1.2rem;transition: all 0.2s linear;border-radius: 4px;font-family: "Exo", Arial, sans-serif;display: inline-flex;justify-content: center;align-items: center;cursor: pointer;width: 85%;}.card__button:hover {color: #fff;background-color: #5a5f73;}.card__button:focus:not(:focus-visible) {outline: none;box-shadow: 0 0 0 3px #03a9f4d9;}.card__button:focus-visible {outline: none;box-shadow: 0 0 0 3px #03f4e0b8;}.card__media img {top: 5%;right: 5%;bottom: 5%;left: 5%;position: absolute;z-index: 2;width: 90%;height: 90%;z-index: 2;}.card__media {position: relative;}.card,.card__media,.card__content {/* backdrop-filter: blur(30px) saturate(125%);background-color: rgb(217 200 200 / 16%); */}</style></head><body translate="no"><div class="card"><div class="card__media"><imgsrc="https://assets.codepen.io/1061/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1&width=80"alt="Airen"/></div><div class="card__body"><h3 class="card__title">Airen Liao</h3><h4 class="card__subtitle">Web Developer</h4><div class="card__action"><button class="card__button">View Profile</button></div><div class="card__content"><div class="followers"><div class="followers__number">405</div><h5 class="followers__title">Followers</h5></div><div class="following"><div class="following__number">85</div><h5 class="following__title">Following</h5></div></div></div></div></body>
</html>
