在多行文本背景中使用框阴影的问题答案

【问题标题】：Issues with using box-shadow for text background over multiple lines在多行文本背景中使用框阴影的问题
【发布时间】：2023-01-07 01:36:21
【问题描述】：

我习惯于使用 box-shadow 作为为文本标题提供背景的一种方式，并利用将 box-shadow 应用于内部标签的技巧，为标题提供整洁的“带填充背景”高亮效果在多行上，背景对齐到跨度的末尾而不是标题块元素。以下代码用于创建如下图所示的效果。

h1.highlight span {
        box-shadow: 0 0 0 16px #fff000;
        background-color: #fff000;
        line-height: 1.6;
        box-decoration-break: clone;
    }

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

然而，在过去的几个月里，我注意到这个技巧不再有效，当标题转到第二行时，框阴影效果再次中断，如下所示：https://codepen.io/georgiacobrien/pen/LYBbJge

首先，有谁知道为什么现在以不同的方式呈现它，以及 2. 是否有更好的方法可以使跨多行的标题获得相同的效果？

【问题讨论】：

不确定你的确切意思/它应该是什么样子，但 span 是一个内联元素，所以你可能想添加 display: block; 或 display: inline-block; 到你的 CSS（？）
@Johannes 我用一张图片更新了我的问题以更好地说明：如果我将它更改为块或内联块，背景会像一个大黄色框一样放在整个东西后面，而不是像图片中那样剪裁到文字 I '补充道。我使用这个技巧多年但不再奏效，所以想看看如何轻松地重现相同的外观。

标签： html css

【解决方案1】：

看起来您正在尝试使用 box-shadow 属性对 h1 元素中的文本创建高亮效果。这是应该达到预期效果的代码的修订版本：

h1.highlight span {
  box-shadow: 0 0 0 16px #fff000;
  background-color: transparent;
  line-height: 1.6;
  box-decoration-break: clone;
}

&lt;h1 class="highlight"&gt;&lt;span&gt;Highlight text&lt;br /&gt;goes here&lt;/span&gt;&lt;/h1&gt;

【讨论】：

是的，我实际上是在使用 box-decoration-break: clone 但似乎在过去几个月的某个时候，Chrome 已经停止在没有 webkit 前缀的情况下渲染该属性（这很奇怪并且可能是一个错误，因为我知道他们确实接受了最近之前的非前缀属性）。谢谢！

【解决方案2】：

似乎这是一个 Chrome/webkit 怪癖。我一直使用 box-decoration-break: clone;没有前缀在 Chrome 上没有问题，但现在看来你需要使用 webkit 前缀 (-webkit-box-decoration-break: clone;) 才能工作。很奇怪，但你去吧！

【讨论】：