【开发小技巧】021—如何使用HTML和CSS创立浮动框效果?

作者 : 开心源码 本文共365个字,预计阅读时间需要1分钟 发布时间: 2022-05-13 共136人阅读

浮动框效果是自己设置框阴影技术的经典示例。在这种技术中,我们无需使用CSS提供的box-shadow属性就可创立逼真的阴影。

方法

方法是在选择器之后使用模糊功能创立阴影。

HTML代码

在本文中,我们创立了主体的基本结构。

在这里,我们使用了一个包含class属性的<div>标记来在屏幕上渲染浮动框。

CSS代码

在本文中,我们使用了少量CSS属性来设计浮动框并在其上增加少量样式。以下步骤形容了CSS属性:

第1步:首先,我们完成了少量基本的样式设置,例如提供背景,创立框并将所有内容对齐页面中心。

步骤2:现在,使用after选择器在我们创立的框下方创立一条细线,而后使用blur函数为其赋予阴影效果。

提醒:请尝试使用较深的颜色和较低的值来实现阴影的模糊功能。

假如没有,您可能最终会使阴影透明。

完整代码

它是以上两个代码的组合。

最终效果如下:

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【开发小技巧】021—如何使用HTML和CSS创立浮动框效果?

发表回复