当前位置：首页 > CSS

css制作毛玻璃

2026-04-01 22:24:52CSS

使用 CSS 制作毛玻璃效果

毛玻璃效果（Frosted Glass）可以通过 CSS 的 backdrop-filter 属性实现，该属性允许对元素背后的区域应用模糊、颜色偏移等滤镜效果。

基本实现方法

在需要添加毛玻璃效果的元素上应用以下 CSS 属性：

.backdrop-element {
    background-color: rgba(255, 255, 255, 0.3); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
    border-radius: 8px; /* 可选圆角 */
    padding: 20px;
}

兼容性注意事项

backdrop-filter 在部分浏览器中需要前缀支持：

css制作毛玻璃

添加 -webkit-backdrop-filter 以确保在 Safari 和旧版 Chrome 中生效。
Firefox 默认启用支持，但早期版本需手动开启。

增强效果

结合其他 CSS 属性提升视觉效果：

.enhanced-glass {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px) brightness(0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

替代方案（不支持 `backdrop-filter` 时）

通过伪元素模拟毛玻璃效果：

css制作毛玻璃

.fallback-glass {
    position: relative;
    overflow: hidden;
}

.fallback-glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: blur(10px);
    z-index: -1;
    margin: -20px; /* 扩大模糊区域 */
}

实际应用示例

导航栏毛玻璃效果：

<header class="glass-nav">
    <nav>...</nav>
</header>

<style>
.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    position: fixed;
    width: 100%;
}
</style>

关键点：