【开发小技巧】026—如何使用HTML和CSS创建浮动框阴影效果?
web前端开发
共 2016字,需浏览 5分钟
·
2020-08-15 18:00
标记来在屏幕上渲染浮动框。CSS代码:在本节中,我们使用了一些CSS属性来设计浮动框并在其上添加一些样式。 以下步骤描述了CSS属性: 提示:请尝试使用较深的颜色和较低的值来实现阴影的模糊功能。如果没有,您可能最终会使阴影透明。 完整代码:它是以上两个代码的组合。 最终效果如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Floating Boxtitle>
head>
<body>
<h1>GeeksForGeeksh1>
<div class="geeks">div>
body>
html>
第1步:首先,我们完成了一些基本的样式设置,例如设置背景,创建外框并将所有内容对齐页面中心。
步骤2:现在,使用After选择器在我们创建的框下方创建一条细线,然后使用blur函数为其赋予阴影效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>Floating Boxtitle>
<style>
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);
}
style>
head>
<body>
<h1>GeeksForGeeksh1>
<div class="geeks">div>
body>
html>
评论