CSS样式

/* 设置背景颜色 */
background-color: rgba(255, 255, 255, 0.89);
/* 应用backdrop-filter属性来创建毛玻璃效果 */
backdrop-filter: brightness(200%) saturate(150%) blur(6px);

brightness(200%)：【亮度】这个函数将背景的亮度增加到原来的200%，即亮度翻倍。如果值超过100%，背景会变得更亮，低于100%会变暗。

saturate(150%)：【饱和度】这个函数将背景的饱和度增加到原来的150%，即饱和度增加50%。如果值超过100%，背景会变得更鲜艳，低于100%会变褪色。

blur(6px)：【模糊】这个函数给背景添加一个模糊效果，模糊半径为6像素。数值越大越模糊。模糊效果会使背景变得不那么清晰，产生一种朦胧感。

效果如图，效果可以自定义。下面是我自己的设定

border-radius: 10px;
border: 1px solid #ffffff9d;
/* 设置背景颜色 */
background-color: rgba(0, 0, 0, 0.20);
/* 应用backdrop-filter属性来创建毛玻璃效果 */
backdrop-filter: brightness(200%) saturate(60%) blur(30px);

加入了border: 1px solid #ffffff9d;，是为了让效果看起来更像毛玻璃。

6645f64d3e500.webp