CSS毛玻璃效果

毛玻璃效果（Glassmorphism）是现代UI设计中的流行趋势，通过背景模糊和半透明效果创造出类似磨砂玻璃的视觉体验。

实现核心代码

/* 毛玻璃效果核心代码 */
.glass-card {
    background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* Safari支持 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明边框 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 柔和阴影 */
    border-radius: 20px;
}

/* 可选：增强模糊效果的伪元素 */
.glass-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    background: inherit;
    filter: blur(20px); /* 增强模糊效果 */
}