css 毛玻璃效果

作者：金钱打造势力狗。发布日期:2026-02-14 浏览:23

/* 毛玻璃效果 */
.blur-container {
  /* 使用 backdrop-filter 属性来实现毛玻璃效果 */
  backdrop-filter: blur(10px);
  /* 设置背景颜色为半透明白色，增强视觉效果 */
  background-color: rgba(255, 255, 255, 0.5);
  /* 设置一些内边距和圆角，使容器看起来更美观 */
  padding: 20px;
  border-radius: 10px;
}

解释说明：

backdrop-filter: blur(10px);：这是实现毛玻璃效果的核心属性。它会对元素的背景应用模糊滤镜，使得背景内容看起来像是透过磨砂玻璃看到的效果。
background-color: rgba(255, 255, 255, 0.5);：设置一个半透明的白色背景，可以增强毛玻璃效果的视觉表现。
padding: 20px; 和 border-radius: 10px;：这些样式是为了让容器看起来更美观，增加了一些内边距和圆角效果。

你可以将这个 CSS 样式应用到一个 HTML 元素上，例如：

<div class="blur-container">
  <p>这是一个带有毛玻璃效果的容器。</p>
</div>

上一篇：css 平行四边形

下一篇：css外边距