CSS 玻璃效果 - CSS

CSS 玻璃效果是实现一个透明度较高的元素，并添加模糊效果，使其看起来像玻璃一样的效果。这种效果常用于背景或卡片上，可以增强页面的美感。

实现方法

使用 backdrop-filter 属性

使用 backdrop-filter 属性可以创建一个具有模糊效果的元素，如下所示：

.glass {
  background-color: rgba(255, 255, 255, 0.5);
  /* 添加背景颜色、透明度 */
  backdrop-filter: blur(10px);
  /* 添加模糊效果 */
}

使用 box-shadow 属性

使用 box-shadow 属性可以实现一个元素有透明的阴影效果。通过调整阴影的颜色、模糊度和偏移量，可以达到类似于玻璃的效果。如下所示：

.glass {
  background-color: rgba(255, 255, 255, 0.5);
  /* 添加背景颜色、透明度 */
  box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.37);
  /* 添加透明的阴影效果 */
  backdrop-filter: blur(10px);
  /* 添加模糊效果 */
}

总结

以上介绍了两种实现 CSS 玻璃效果的方法，通过添加透明度、模糊效果和阴影效果可以创建出一个看起来像玻璃的效果。在开发中，可以根据实际需求选择不同的方法。