如何仅用HTML和CSS为body添加顶部内阴影效果

仅用HTML和CSS就能实现你要的效果，以下是两种常用实现方案：

方案1：容器直接加内阴影（最简实现） #

直接在你需要加阴影的窗口容器上添加带inset参数的box-shadow属性即可，适合容器内部无全宽不透明顶部元素的场景。
完整可运行示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>顶部内阴影示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 这里以body作为整个应用窗口容器为例 */
    body {
      min-height: 100vh;
      background-color: #f8f8f8;
      padding: 16px;
      /* 核心内阴影代码 */
      box-shadow: inset 0 24px 36px rgba(0, 0, 0, 0.12);
    }
    /* 演示用内容卡片 */
    .demo-card {
      height: 180px;
      background: #fff;
      border-radius: 12px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
  </style>
</head>
<body>
  <div class="demo-card"></div>
  <div class="demo-card"></div>
  <div class="demo-card"></div>
  <div class="demo-card"></div>
</body>
</html>

方案2：固定定位伪元素实现（无遮挡，推荐全局使用） #

如果页面顶部有导航栏等不透明元素，方案1的内阴影会被内容遮挡，用固定定位的伪元素悬浮在最顶层即可解决，滚动页面时阴影也会固定在顶部不会消失：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>全局固定顶部内阴影示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      min-height: 100vh;
      background-color: #f8f8f8;
      padding: 16px;
      padding-top: 60px;
    }
    /* 全局顶部阴影伪元素 */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 36px;
      /* 阴影向下投射，模拟内阴影效果 */
      box-shadow: 0 24px 36px rgba(0, 0, 0, 0.12);
      /* 不拦截下层元素的点击、滑动等交互 */
      pointer-events: none;
      /* 确保阴影在最顶层，不被其他元素遮挡 */
      z-index: 9999;
    }
    /* 演示用顶部导航栏 */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      background: #fff;
      padding: 0 16px;
      line-height: 56px;
      z-index: 100;
    }
    /* 演示用内容卡片 */
    .demo-card {
      height: 180px;
      background: #fff;
      border-radius: 12px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
  </style>
</head>
<body>
  <div class="nav">导航栏</div>
  <div class="demo-card"></div>
  <div class="demo-card"></div>
  <div class="demo-card"></div>
  <div class="demo-card"></div>
</body>
</html>

参数调整说明 #

你可以根据自己的设计需求调整以下数值：

• 阴影深浅：修改rgba的第四个透明度参数，取值范围0_{1，常规使用0.08}0.2效果比较自然
• 阴影覆盖范围：调整box-shadow的第二个垂直偏移数值，数值越大阴影向下延伸的范围越大
• 阴影柔和度：调整box-shadow的第三个模糊半径数值，数值越大阴影越柔和

内容的提问来源于stack exchange，提问作者MERCER