如何使用 CSS 和 HTML 创建 Glassmorphism 效果
Glassmorphism 效果在现代网页设计中越来越流行
Glasmorphism 是一个有点新的功能，它一直在流行，并且经常在新设计的网站上受到青睐，以赋予网站全新的独特外观。它在诸如此类的服务上越来越受欢迎 行为 和 运球 .
它使您网站的元素能够显示为透明或毛玻璃。它还允许您使用生动或柔和的颜色和浅色边框进行独特的网页设计。
在这个简短而有见地的分步教程中，我们将看看如何制作称为 Glassmorphism 的类似玻璃的外观，并从头开始一步一步地感受。我们最终的用户界面将如下图所示。此外，请随意按照您的口味使用不同值的教程。
在我们继续之前，我想让我们知道，CSS 中类似玻璃的外观基本上是在操纵 HTML 元素的不同层的颜色，这样当浏览器渲染它时，眼睛会感觉它好像是一条玻璃条放在另一个上，上面写着文字。
步骤1
我们首先使用纯 HTML 创建项目的框架。我们将创建 3 个 div：一个容器，一个卡片，另一个用于嵌套内容，如代码片段所示。
<div class="container">
<div class="card">
<div class="content">
<h2>01</h2>
<h3>服务</h3>
<p>对客户来说，遵循客户的培训非常重要，但是随着时间的推移，他的 mod 会发生大量的工作和痛苦。因为让我来找你，任何人都不应该从事任何工作，除非他从中获得一些好处
</p>
<a href="">阅读更多...</a>
</div>
</div>
</div>
然后将根据需要复制此代码以创建三张不同的卡。
笔记
我们教程的重点是 CSS 而不是 HTML，所以让我们直接进入颜色操作。
第2步
调整 HTML 的主体，以便我们创建将放置所有元素的第一层。
导入网址('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
*
{
边距：0；
填充：0；
box-sizing：边框框；
字体系列：'poppin'，无衬线；
}
身体 {
显示：弯曲；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
背景：#161623；
}
第 3 步
在我们的成品中创建两个圆圈。
身体::之前{
内容： ””;
位置：绝对；
顶部：0；
左：0；
宽度：100%；
高度：100%；
背景：线性渐变（#2196f3，#e91e63）；
剪辑路径：圆形（20% 到 10% 10%）；
}
正文::{之后
内容： ””;
位置：绝对；
顶部：0；
左：0；
宽度：100%；
高度：100%；
背景：线性渐变（#2196f3，#e91e63）；
剪辑路径：圆形（20% 到 10% 10%）；
}
笔记
正如我们将在前面的步骤中看到的那样，将圆圈置于背景中以显示模糊效果的差异。
在上面的代码片段中要注意的最重要的事情是使用 clip-path 属性，它产生一个圆圈并使用在 circle 函数中传递的百分比值来定位它们，以及使用 linear-gradient 提供比 a 更好的玻璃状反射纯色会。
第4步
您可以通过更改其值来继续使用渐变，还可以使用圆函数来操纵每个圆的位置。
第 5 步
为容器设置样式，以适合您的方式定位内容。对我来说，我将使用如下所示的值。
。容器 {
位置：相对；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
最大宽度：1200%；
弹性包装：换行；
z-index：1；
}
在容器内设计卡片样式。我的首选值如下所示。随意使用自定义值来实现您想要的样式。
笔记
使用框阴影、边框和背景过滤器功能来实现所需的效果。背景过滤器使卡片模糊，使其看起来好像我们正在透过玻璃看内容。边框的存在是为了给它一个 3-D 的外观，使卡片看起来像一条小玻璃条，而盒子阴影将通过给它一个阴影来区分卡片和背景。同样，我们可以使用这些值来获得所需的效果。
笔记
边框仅放置在顶部和左侧，而不是全部围绕卡片元素。
.container .card {
位置：相对；
宽度：280%；
高度：400%；
边距：30px；
盒子阴影：20px 20px 50px rgba(0,0, 0, 0.5);
边框半径：5px；
背景：rgba(255, 255, 255, 0.1);
溢出：隐藏；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
边框顶部：1px 实心 rgba(255, 255, 255, 0.5);
左边框：1px 实心 rgba(255, 255, 255, 0.5);
背景滤镜：模糊（5px）；
}
此时，您应该已经有了一个看起来像玻璃的项目。但是，当我们可以让它看起来更好时，为什么要停在这里。让我们进入卡片中，将其内容一一修改，以使其更好看。检查下面的代码片段。
.container .card .content {
填充：20px；
文本对齐：居中；
过渡：0.5s；
}
.container .card .content h2 {
位置：绝对；
顶部：-30 像素；
右：30px；
字体大小：6em；
颜色：rgba(255, 255, 255, 0.99);
指针事件：无；
}
.container .card .content h3 {
字体大小：1.8em；
颜色：#fff;
z-index：1；
}
给你，你得到它。
与构建站点时的任何设计功能一样，将其与站点的其他类型的设计元素一起使用是一个独特但一致的设计。随意根据需要修改代码，以更好地理解事物的工作原理并创建自己的 CSS 效果。
让我们知道您如何在自己的网页设计中应用此功能。谢谢你陪我到最后。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/11670/51140311
标签：卡片,Glassmorphism,边框,HTML,使用,CSS,255 From： https://www.cnblogs.com/amboke/p/16652311.html