英文 | https://www.geeksforgeeks.org/how-to-create-floating-box-effect-using-html-and-css/?ref=rp
浮動框效果是自定義框陰影技術的經典示例。在這種技術中，我們無需使用CSS提供的box-shadow屬性即可建立逼真的陰影效果。
實作方法：在選擇器之後使用模糊功能建立陰影。
HTML：在本文中，我們建立了主體的基本結構。在這裡，我們使用了一個包含Class屬性的<div>标記來在螢幕上渲染浮動框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Floating Box</title>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="geeks"></div>
</body>
</html> CSS代碼：在本節中，我們使用了一些CSS屬性來設計浮動框并在其上添加一些樣式。
以下步驟描述了CSS屬性：
- 第1步：首先，我們完成了一些基本的樣式設定，例如設定背景，建立外框并将所有内容對齊頁面中心。
- 步驟2：現在，使用After選擇器在我們建立的框下方建立一條細線，然後使用blur函數為其賦予陰影效果。
提示：請嘗試使用較深的顔色和較低的值來實作陰影的模糊功能。如果沒有，您可能最終會使陰影透明。
<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> 完整代碼：它是以上兩個代碼的組合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>Floating Box</title>
<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>GeeksForGeeks</h1>
<div class="geeks"></div>
</body>
</html> 最終效果如下：
