如何用CSS实现div边框显示在背景色上层且满足响应式要求

问题根因 #

你现有代码的主要问题有三个：

1. DOM结构语法错误，borderOverDiv对应的标签没有正确闭合
2. 绝对定位的边框元素没有设置z-index，同级的正常流背景元素默认堆叠层级更高，导致边框被背景覆盖
3. 宽度使用calc(100% - 94%)适配性极差，无法满足响应式需求

解决方案 #

提供两种常用实现方式，均支持响应式： #

方案1：使用独立边框元素（适合需要单独控制边框动画/位置的场景）

<!-- React环境请把class替换为className -->
<div class="container">
  <div class="backgroundClr"></div>
  <div class="borderOverDiv"></div>
</div>

.container {
  position: relative;
  /* 父级可根据布局需求自适应宽度，自动实现响应式 */
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.borderOverDiv{
  position: absolute;
  /* inset: 0 等价于 top/right/bottom/left 都设为0，自动适配父级尺寸 */
  inset: 0;
  border: 1px solid red;
  border-radius: 10px;
  /* 提升堆叠层级，确保在背景上层 */
  z-index: 10;
  background: transparent;
}

.backgroundClr{
  background: blue;
  height: 30px;
  border-radius: 10px;
}

方案2：无额外DOM实现（更简洁，适合普通场景）

直接用CSS内阴影模拟边框，不需要额外加边框元素，天然在背景色上层，自动跟随元素尺寸变化实现响应式：

.backgroundClr{
  background: blue;
  height: 30px;
  border-radius: 10px;
  /* 最后两个参数分别是阴影模糊度、扩展半径，调整扩展半径即可改边框粗细 */
  box-shadow: 0 0 0 1px red;
}

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