相信你已经在UI（用户界面）上看到过这种玻璃模糊的效果，比如MacOS和iOS，甚至现在的Windows，所以玻璃背景绝对是一种趋势效果。而且网站中的毛玻璃ui设计或玻璃模糊可以使用CSS进行模拟，十分友好。毛玻璃效果层次效果通透，半透明的磨砂状态，给人一种似有似无、若隐若现的朦胧美，玻璃层承载着重要文案信息，投过玻璃层可以看到底部的缤纷元素，设计的质感非常细腻。那么，什么是“毛玻璃”效果呢？

  1. ‌定义‌
    • ‌毛玻璃效果‌（学名“类玻璃柔光材质”）又名玻璃拟态(Glass morphism)，通过背景模糊、透明度调整和层次叠加，模仿磨砂玻璃的朦胧美感。其物理原型为实体毛玻璃（磨砂玻璃），常用于门窗隔断以兼顾透光性和隐私性。
  2. ‌视觉特征‌
    • ‌通透感‌：使用高斯模糊和半透明处理，呈现若隐若现的视觉效果。
    • ‌层次感‌：通过叠加元素拉开信息层级，例如浮窗、弹窗等悬浮形式。
    • ‌色彩与质感‌：鲜艳背景透出半透明层，辅以细腻边框模拟玻璃厚度。

CSS3实现毛玻璃效果主要有两种方法：使用filter属性和使用backdrop-filter属性。‌

使用filter属性

filter属性可以通过CSS的blur()函数来实现模糊效果，从而创建毛玻璃效果。这种方法适用于所有元素，包括图片和背景。例如：

.test {
  width: 400px;
  height: 200px;
  filter: blur(2px);
  background: url(background.png) no-repeat;
}

使用backdrop-filter属性

backdrop-filter: blur(5px);是CSS3中专门用于背景的模糊效果，不会影响子元素。使用方法如下：

.home::before {
  position: absolute;
  top: 200px;
  left: 500px;
  display: block;
  height: 500px;
  width: 500px;
  content: '';
  background-color: rgba(230, 230, 230, 0.5);
  backdrop-filter: blur(5px);
}

本站非特殊注明，均属于IDEA的原创文章；未经授权禁止任何形式转载！（文章地址：https://idea.8i5.net/mao-glass-style-interface-design.html）