HTML 和 CSS 来实现毛玻璃效果（Glassmorphism）

最新推荐文章于 2024-05-02 08:57:10 发布

视图猿人

最新推荐文章于 2024-05-02 08:57:10 发布

阅读量8.2k

点赞数 6

分类专栏： HTML 文章标签： html css 前端

本文链接：https://blog.csdn.net/hulinhulin/article/details/132428711

版权

毛玻璃效果简介

它的主要特征就是半透明的背景，以及阴影和边框。

同时还要为背景加上模糊效果，使得背景之后的元素根据自身内容产生漂亮的“变形”效果，示例：

Glassmorphism

代码实现

首先，创建一个 HTML 文件，写入如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect</title>
</head>
<body>
    <!-- code goes here -->
</body>
</html>

为 body 标签添加一些样式，并使用鲜艳的颜色和渐变作为背景：