在使用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文件无需更改，因为它已经包含了正确的
8AI-Module <body class="d-flex h-100 text-bg-dark">
Status
System
ESP-IDF Version 4.4.2 Firmware Version 0.0.1 Build Date 12 July 2021 - 20:55 Uptime 47 days MQTT
Status Disconnected Server 192.168.3.2 Port 6565 Last change 17 hours Modules
Module 1 Enabled Module 2 Disabled Module 2 Disabled Module 2 Disabled Cover your page.
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.