多行文本标题用box-shadow实现背景高亮失效，求原因及替代方案

1. 渲染异常的原因 #

你之前的方案是靠box-shadow: 0 0 0 16px #fff000模拟内边距，再用box-decoration-break: clone让每行克隆阴影效果。近期失效的核心原因是浏览器布局引擎的行为更新：

• 部分主流浏览器（如Chrome/Edge）在新版本中调整了 inline 元素的box-shadow与box-decoration-break: clone的组合处理逻辑，不再将大扩展值的 box-shadow 视为可克隆的行盒装饰部分，导致换行后阴影无法连续覆盖每行文本。
• 这种用 box-shadow 模拟内边距的写法属于 hack 技巧，本身依赖浏览器的非标准兼容行为，一旦浏览器规范或实现调整，就容易失效。

2. 更优实现方案 #

推荐两种符合规范、稳定性更强的方案，均能实现贴合多行文本的高亮效果：

方案一：background + padding + box-decoration-break（优先推荐） #

直接用background-color设置高亮，配合padding控制内边距，通过box-decoration-break: clone让每行独立应用样式，完全不需要依赖 box-shadow：

h1.highlight span {
  background-color: #fff000;
  /* 按需调整内边距，替代之前的 box-shadow 扩展效果 */
  padding: 0.2em 0.5em;
  line-height: 1.6;
  /* 确保行盒装饰克隆生效，兼容webkit内核浏览器 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<h1 class="highlight"><span>Highlight text<br />goes here</span></h1>

该方案符合CSS规范，浏览器支持度高，不会因引擎更新轻易失效。

方案二：inline-block + line-height（适合大上下内边距场景） #

如果需要更明显的上下内边距，inline元素的padding可能无法完全撑开行高，可将span设为inline-block，配合line-height保证文本对齐：

h1.highlight span {
  display: inline-block;
  background-color: #fff000;
  padding: 0.5em;
  line-height: 1.6;
}

注意：此方案的高亮块是整体的inline-block容器，适合标题换行后需要统一高亮背景的场景；若要每行单独贴合文本，优先选用方案一。

内容的提问来源于stack exchange，提问作者Georgia O'Brien