在使用bootstrap构建页面时，将`box-shadow`直接应用于`body`元素可能导致当页面内容超出浏览器视口高度时，阴影效果在滚动时显示不完整。本教程将深入分析这一问题，并提供一个通过调整css样式，将`box-shadow`应用到`main`内容区域的解决方案，以确保阴影效果能随着内容完整呈现，提升用户体验。
理解box-shadow在滚动页面中的行为
在网页设计中，box-shadow是一种强大的CSS属性，用于为元素添加阴影效果，从而增强视觉深度和层次感。然而，当页面内容的高度超过浏览器视口（viewport）的高度，并且用户需要滚动才能查看全部内容时，box-shadow的显示行为可能会变得复杂。
问题分析：为什么body上的阴影会失效？
在给定的示例代码中，html和body元素被设置为占据视口的全高：
html {
min-height: 100%;
display: flex;
flex-direction: column;
}
body {
/* ... */
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); /* 原始问题所在 */
}以及HTML中的body类：
<body class="d-flex h-100 text-bg-dark">
h-100是Bootstrap的一个工具类，等同于height: 100%。结合html上的min-height: 100%和display: flex，这使得body元素的高度被限制在浏览器视口的高度。即使body内部的内容溢出并导致页面出现滚动条，body元素本身的渲染高度仍然是视口高度。
立即学习“前端免费学习笔记（深入）”；
当box-shadow（尤其是inset内阴影）被应用到body元素时，它会基于body元素的边界进行渲染。由于body的高度被限制在视口内，当内容滚动时，body的阴影并不会随之延伸到整个可滚动内容区域的底部，而是停留在视口底部，造成阴影显示不完整的视觉问题。
解决方案：将box-shadow应用于main元素
解决这个问题的核心在于将box-shadow应用到真正承载可滚动内容的元素上。在标准HTML结构中，
通过将box-shadow从body元素移除，并将其应用到
实施步骤
-
移除body上的box-shadow: 在style.css中找到body选择器下的box-shadow属性并将其删除。
修改前：
body { text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); /* 移除此行 */ } -
为main元素添加box-shadow: 在style.css中为main元素添加box-shadow属性。考虑到原始示例中可能希望的是一个外阴影效果，这里我们使用标准的box-shadow（默认为外阴影）。
修改后：
body { text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); /* box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); 此行已移除 */ } main { /* 添加此选择器和属性 */ box-shadow: 0 0 5rem rgba(0, 0, 0, .5); }注意： 这里的box-shadow参数0 0 5rem rgba(0, 0, 0, .5)是一个外阴影，它会从main元素的外部边缘向外扩展。如果需要内阴影，可以加上inset关键字。
示例代码（style.css）
/*
* Globals
*/
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
}
/*
* Base structure
*/
body {
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
/* 移除 body 上的 box-shadow */
}
main { /* 为 main 元素添加 box-shadow */
box-shadow: 0 0 5rem rgba(0, 0, 0, .5);
}
.cover-container {
max-width: 42em;
}
/*
* Header
*/
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
html {
min-height: 100%;
/*height: 100%;*/
display: flex;
flex-direction: column;
}示例代码（index.html）
HTML文件无需更改，因为它已经包含了正确的
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>8AI-Module</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body class="d-flex h-100 text-bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0"><a class="navbar-brand" href="#">8AI-Module</a></h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Status
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" id="status-overview-a" href="#">Overview</a></li>
<li><a class="dropdown-item" id="status-modules-a" href="#">Modules</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Settings
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" id="settings-mqtt-a" href="#">MQTT</a></li>
<li><a class="dropdown-item" id="settings-modules-a" href="#">Modules</a></li>
</ul>
</li>
</nav>
</div>
</header>
<main class="px-3"> <!-- box-shadow 将作用于此元素 -->
<div id="status-overview">
<h1>Status</h1>
<h3>System</h3>
<div id="status-system-tb"><table class="table table-dark"><tbody><tr><td>ESP-IDF Version</td><td>4.4.2</td></tr><tr></tr><tr><td>Firmware Version</td><td>0.0.1</td></tr><tr></tr><tr><td>Build Date</td><td>12 July 2021 - 20:55</td></tr><tr></tr><tr><td>Uptime</td><td>47 days</td></tr><tr></tr></tbody></table></div>
<h3>MQTT</h3>
<div id="status-mqtt-tb"><table class="table table-dark"><tbody><tr><td>Status</td><td>Disconnected</td></tr><tr></tr><tr><td>Server</td><td>192.168.3.2</td></tr><tr></tr><tr><td>Port</td><td>6565</td></tr><tr></tr><tr><td>Last change</td><td>17 hours</td></tr><tr></tr></tbody></table></div>
<h3>Modules</h3>
<div id="status-modules-tb"><table class="table table-dark"><tbody><tr><td>Module 1</td><td>Enabled</td></tr><tr></tr><tr><td>Module 2</td><td>Disabled</td></tr><tr></tr><tr><td>Module 2</td><td>Disabled</td></tr><tr></tr><tr><td>Module 2</td><td>Disabled</td></tr><tr></tr></tbody></table></div>
</div>
<div id="status-modules" class="d-none">
status modules
</div>
<div id="settings-mqtt" class="d-none">
settings mqtt
</div>
<div id="settings-modules" class="d-none">
<h1>Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit
the
text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
</p>
</div>
</main>
<footer class="mt-auto text-white-50 text-center">
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a
href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>
</body>
</html>注意事项与最佳实践
-
选择合适的元素: 在应用视觉效果时，始终考虑效果应该作用于哪个逻辑或视觉上的“盒子”。对于页面整体的背景或阴影，如果内容是可滚动的，那么将效果应用于包含可滚动内容的容器（如
、 或特定的div）通常是更优的选择。 - inset与outset阴影: box-shadow默认创建外阴影（outset）。如果需要内阴影，必须明确指定inset关键字。根据设计需求选择合适的阴影类型。
- 性能考量: 复杂的box-shadow（尤其是带有模糊半径和扩展半径的）可能会对页面渲染性能产生轻微影响。在现代浏览器中通常不是大问题，但在低性能设备或大量元素上应用时仍需注意。
- 响应式设计: 确保box-shadow在不同屏幕尺寸和设备上都能良好显示。有时，可能需要通过媒体查询调整阴影参数。
总结
通过将box-shadow从body元素移动到
