具有模糊背景的漂亮卡片 - 玻璃效果 - 分步教程

Q shen

已于 2023-07-11 16:17:01 修改

阅读量187

点赞数

文章标签： css css3 前端

于 2023-07-11 16:16:22 首次发布

本文链接：https://blog.csdn.net/qq_52010446/article/details/131662967

版权

本文提供了一个使用HTML和CSS创建具有模糊背景的玻璃效果卡片的分步教程。通过设置适当的背景颜色、滤镜、边框、内边距、相对定位和伪类，可以实现卡片的美观设计。同时，详细介绍了如何布局个人资料和信息部分，包括图片、文字样式以及使用Flexbox进行布局。

摘要由CSDN通过智能技术生成

对于 HTML，我们需要一个带有“card”类的 div 元素。

在卡片元素内部，我们需要两个 div，一个带有“profile”类，另一个带有“info”类。

在 info 元素内，我们将在 b 标签中放置一个名称，在 span 标签中放置一个职位。

HTML 代码就这样了。

<div class="card">
    <div class="profile"></div>
    <div class="info">
        <b>Jane Doe</b>
        <span>Photographer</span>
    </div>
</div>

对于 CSS，首先我们将设置卡片元素的样式。

我们将浅透明黄色背景颜色设置为 5 像素，适合模糊滤镜。这将产生漂亮的玻璃效果。
现在我们将添加一些填充、边框半径并在列中显示项目，以 30 像素间隙居中对齐。

最后，我们将位置设置为相对，溢出设置为隐藏，并添加一点盒子阴影。

.card

关注