来源 | https://www.geeksforgeeks.org/how-to-create-floating-box-effect-using-html-and-css/?ref=rp
浮动框效果是自定义框阴影技术的经典示例。在这种技术中,我们无需使用CSS提供的box-shadow属性即可创建逼真的阴影。
方法
方法是在选择器之后使用模糊功能创建阴影。
HTML代码
在本文中,我们创建了主体的基本结构。
在这里,我们使用了一个包含class属性的
content="width=device-width,
initial-scale=1.0">
Floating Box
GeeksForGeeks
GeeksForGeeks
CSS代码
在本文中,我们使用了一些CSS属性来设计浮动框并在其上添加一些样式。以下步骤描述了CSS属性:
第1步:首先,我们完成了一些基本的样式设置,例如提供背景,创建框并将所有内容对齐页面中心。
步骤2:现在,使用after选择器在我们创建的框下方创建一条细线,然后使用blur函数为其赋予阴影效果。
提示:请尝试使用较深的颜色和较低的值来实现阴影的模糊功能。
如果没有,您可能最终会使阴影透明。
body {
background: green;
}
h1 {
display: flex;
justify-content: center;
color: white;
font-size: 40px;
}
.geeks {
width: 400px;
height: 250px;
background: white;
position: absolute;
top: 16%;
left: 35%;
border-radius: 20px;
}
.geeks::after {
content: "";
position: absolute;
bottom: -30px;
background: rgb(43, 42, 42);
width: 90%;
height: 4px;
left: 3%;
border-radius: 50%;
filter: blur(3px);
}
完整代码
它是以上两个代码的组合。
"width=device-width,initial-scale=1.0">
Floating Box
body {
background: green;
}
h1 {
display:flex;
justify-content: center;
color: white;
font-size: 40px;
}
.geeks {
width:400px;
height:250px;
background: white;
position: absolute;
top:16%;
left:35%;
border-radius: 20px;
}
.geeks::after {
content: "";
position: absolute;
bottom: -30px;
background: rgb(43, 42, 42);
width: 90%;
height:4px;
left:3%;
border-radius:50%;
filter: blur(3px);
}
GeeksForGeeks
GeeksForGeeks
最终效果如下:
更多开发技巧
【开发小技巧】019—如何使用HTML和CSS实现鼠标悬停时文本的旋转?
【开发小技巧】018—如何使用AngularJS动态获取div的内容宽度?
【开发小技巧】017—如何使用PHP创建管理员登录页面?
【开发小技巧】016—如何使用HTML和CSS将文字环绕在图片周围?
【开发小技巧】015—如何使用HTML和CSS创建图像叠加悬停?
【开发小技巧】014—如何使用CSS为直线运动中的直线设置动画?