HTML 和 CSS 来实现毛玻璃效果（Glassmorphism）优知新11个月前发布关注私信3740 ------正文内容展示，开始汲取新知识啦------ 毛玻璃效果简介 它的主要特征就是半透明的背景，以及阴影和边框。 同时还要为背景加上模糊效果，使得背景之后的元素根据自身内容产生漂亮的“变形”效果，示例： 代码实现 首先，创建一个 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 标签添加一些样式，并使用鲜艳的颜色和渐变作为背景： body { padding: 4.5rem; margin: 0; background: #edc0bf; background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%); font-family: 'Inter', sans-serif; } 现在基本的标签和样式做好了，接下来在 body 标签里创建一个卡片元素： <div class="card"> <h3 class="card-title">Glassmorphism is awesome</h3> <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p> <a href="https://ui.glass">Read more</a> </div> 添加样式 .card { width: 400px; height: auto; padding: 2rem; border-radius: 1rem; } .card-title { margin-top: 0; margin-bottom: .5rem; font-size: 1.2rem; } p, a { font-size: 1rem; } a { color: #4d4ae8; text-decoration: none; } 你要做的只是设置一个半透明背景颜色，并使用 backdrop-filter 属性设置模糊效果。在 .card 元素的样式中加入以下 CSS： .card { /* other styles */ background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } 后方没有形状时的效果 让我们使用 img 标签在 body 起始标签之后加入一个形状图片： <img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" > 并为 .shape 元素添加以下样式，将其定位在页面的合适位置： .shape { position: absolute; width: 150px; top: .5rem; left: .5rem; } 效果如下图所示： 完整代码html和css代码如下： 此处内容已隐藏，请评论后刷新页面查看. 温馨提示：本文最后更新于2023-12-19 14:21:29，某些文章具有时效性，若有错误或已失效，请私信客服或联系知新社长。------本文内容已结束，喜欢请分享------ 感谢您的访问，Ctrl+D收藏本站吧。 © 版权声明 相关声明 1、本站名称：知新网 2、本站永久网址：https://www.uzhix.com 3、本站部分内容源于网络和用户投稿，仅供学习与参考，如有侵权，请联系站长进行删除处理。 4、用户评论和发布内容，并不代表本站赞同其观点和对其真实性负责。 5、本站禁止以任何方式发布或转载任何违法的相关信息。 6、资源大多存储在云盘，如发现链接失效，请联系我们替换更新。 二月 5 知岛上的今时往日 2023：Zibll主题美化 长文章分页按钮美化 (1)2023：修改子比认证图标为闪电标志(可自定义svg) (31)2023：给子比主题添加一个小黑屋页面展示功能 (32)2023：个人博客网站在备案期间怎么关闭首页无法访问，文章及其他页面正常访问 (1)2023：WordPress给网站添加鼠标右键自定义菜单美化 (18) THE END教程之家知识/课程/教育# 代码# 背景# 标签# CSS代码# HTML代码# 毛玻璃效果 点赞0投币 分享QQ空间微博QQ好友海报分享复制链接收藏
