怎样在SCSS中编写通用的CSS毛玻璃磨砂效果-css教程-PHP中文网

毛玻璃效果的核心css属性是backdrop-filter: blur()，必须配合半透明background-color（如rgba）使用，仅靠opacity或filter无法实现真正毛玻璃效果。

怎样在scss中编写通用的css毛玻璃磨砂效果

毛玻璃效果的核心CSS属性是什么

毛玻璃（frosted glass）本质是半透明叠加背景模糊，关键就两个声明：background-color 配合 backdrop-filter: blur()。SCSS 本身不提供新能力，但能帮你把重复逻辑抽成可复用的模块。注意：仅靠 opacity 或 rgba() 背景色不能实现真正毛玻璃——它只让元素自身变透明，不会模糊背后内容。

backdrop-filter: blur(10px) 是核心，控制背景虚化强度
必须搭配半透背景，如 background-color: rgba(255, 255, 255, 0.15)
父容器需有可被“穿透”的背景（比如设置了 background-image 或位于滚动区域中）
不加 -webkit-backdrop-filter 在 Safari 旧版本会直接失效

如何用SCSS mixin封装通用毛玻璃类

写一个带参数的 mixin 最实用，避免每次手敲冗余样式：

@mixin glass($bg: rgba(255, 255, 255, 0.15), $blur: 10px, $border: none) {
  background-color: $bg;
  -webkit-backdrop-filter: blur($blur);
  backdrop-filter: blur($blur);
  @if $border != none {
    border: $border;
  }
}

使用时：

.card-glass {
  @include glass(rgba(255, 255, 255, 0.1), 12px, 1px solid rgba(255, 255, 255, 0.2));
}

参数顺序按使用频率排列：背景色最常调，模糊值次之，边框最少动
$border: none 作为默认值，避免强制传参
不在 mixin 里写 padding 或 border-radius——这些属于容器语义，不该和玻璃效果耦合

哪些地方容易导致毛玻璃失效

常见失效不是代码写错，而是上下文不满足：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

父元素设置了 overflow: hidden，裁剪了 backdrop 的作用范围
元素用了 transform: translateZ(0) 或其他触发层叠上下文的属性，导致 backdrop 被截断
在 iframe 内或跨域页面中，backdrop-filter 被浏览器策略禁用
某些安卓 WebView（尤其旧版 Chrome）完全不支持 backdrop-filter，需用 @supports 降级

可以用这个做渐进增强：

.glass-panel {
  background-color: rgba(255, 255, 255, 0.15);
  @supports (backdrop-filter: blur(1px)) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}