如何用可变背景色覆盖父元素边框？适配明暗模式及EPUB开发

问题核心 #

需要让带底部边框的<p>元素内的<span>遮挡住父元素的边框，且在明暗模式下都能正常显示，同时保留<p>的边框延伸至容器末尾的效果。

可行方案 #

利用CSS的inherit关键字让子元素继承父元素的背景色，结合内边距实现覆盖，无需固定颜色，天然适配明暗模式。

代码实现 #

CSS

/* 基础样式 */
.body {
  border-bottom: 1px dotted #334;
  background-color: #ffffff; /* 默认浅色背景 */
}

/* 暗黑模式适配（支持媒体查询的阅读器） */
@media (prefers-color-scheme: dark) {
  .body {
    background-color: #1e1e1e;
    border-bottom-color: #cccccc;
  }
}

span.gap {
  display: inline-block; /* 确保内边距生效 */
  background-color: inherit; /* 继承父元素背景色 */
  padding-bottom: 1px; /* 用背景色覆盖父元素边框 */
}

HTML

<p class="body">
text in text <span class="gap">This more text</span> and even more text
</p>

方案说明 #

• inherit关键字确保<span>的背景色始终与父元素一致，无论明暗模式如何切换，都能完美遮挡父元素的边框。
• display: inline-block是为了让padding-bottom生效，保证背景色能覆盖到父元素的边框区域；如果阅读器支持，也可以用border-bottom: 1px solid inherit替代内边距，效果一致。
• 对于不支持媒体查询的老式阅读器，只需固定设置父元素的背景色，<span>依然能继承并覆盖边框，不影响基础功能。

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