预览效果
实现原理：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
完整代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;background: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg);background-size: cover;background-position: center;}.frosted-glass {display: flex;justify-content: center;align-items: center;width: 72vw;height: 36vh;border-radius: 5px;box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);backdrop-filter: blur(20px);transition: 0.5s ease;}.title {font-size: 40px;font-weight: 300;letter-spacing: 0.75em;color: #fff;}.frosted-glass:hover {box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);}</style><title>毛玻璃</title>
</head><body><div class="frosted-glass"><h1 class="title">cherry blossoms</h1></div>
</body></html>
