使用 box-decoration-break 装饰文本行

机构的座右铭，艺术家的简介，公司的标语，社区的原则，服务的问候……它们都有一个共同点：它们是网站主页上显示的一段简短文字——或者至少是关于页面！

仅仅用一个单词或一行文本欢迎您访问网站的情况很少见。因此，让我们看看一些我们可以为段落的行设置样式的有趣方法。

为了了解当前的情况，让我们尝试为内联span中一些文本的所有行添加边框，看看效果如何。

<p><span>Hummingbirds are birds from...</span></p>

span {
  border: 2px solid;
}

查看 CodePen 上 Preethi (@rpsthecoder) 编写的笔 断开的内联框。

边缘看起来是断开的，从技术上讲它们确实是断开的，因为内联框已分成多行。但是我们可以使用 box-decoration-break 修复这些断开的边缘！

CSS 中的box-decoration-break属性可以装饰断开的内联框（以及页面、列和区域框）片段的边缘。

它的值clone使用与框的未断开边缘中显示的相同设计来执行此操作，而它的默认值slice不会复制边缘处的装饰，使断开非常明显，就像您在上面的演示中看到的那样。

让我们试试看。

span {
  border: 2px solid;
  box-decoration-break: clone;
}

查看 CodePen 上 Preethi (@rpsthecoder) 编写的笔 带有 box-decoration-break 的断开的内联框。

该属性不仅影响边框，还影响断开边缘的阴影、间距和背景。

让我们首先使用背景。在撰写关于 击穿文本 的文章时，我使用了 background-clip 属性，并想看看该设计是否适用于多行文本。事实并非如此。

我应用的背景渐变没有在每一行中复制，并且在剪裁后，只有第一行保留了背景。也就是说，除非添加了box-decoration-break: clone。

<p><span>Singapore:<br>Lion City</span></p>

span {
  background-image: linear-gradient(135deg, yellow, violet);
  background-clip: text;
  color: transparent;
  padding: .5em;
  box-decoration-break: clone;
}

查看 CodePen 上 Preethi (@rpsthecoder) 编写的笔 带有 box-decoration-break 的渐变多行文本。

background-clip 属性与text值一起将背景剪裁到其前景文本的形状。由于我们使用了box-decoration-break，因此渐变背景在文本所有行中都显示并剪裁一致。

回到边框，让我们看看它的形状和阴影如何以及填充如何复制到断开的边缘。

<img src="tree.png">
<p><span>Supertrees are tree-like structures...</span></p>
<img src="tree.png">
<p><span>Supertrees are tree-like structures...</span></p>

span {
  background: rgb(230,157,231);
  border-radius: 50% 0%;
  box-shadow: 0 0 6px rgb(41,185,82), 0 0 3px beige inset;
  padding: .5em 1.3em;
  box-decoration-break: clone;
}

p:nth-of-type(2) span {
  background-clip: content-box;
}

查看 CodePen 上 Preethi (@rpsthecoder) 编写的笔 带有 box-decoration-break 的内联边框形状和阴影。

在演示的第二段中，背景被裁剪到内容框（background-clip: content-box）。如您所见，由于box-decoration-break: clone，裁剪也发生在断开的边缘。

我们可以使用图像以另一种方式设置边框的样式。如果您现在使用的浏览器支持 border-image 以及在其结果上应用box-decoration-break，您可能会看到下面文本行周围有一个渐变边框，覆盖断开的边缘。

<p><span>The Malaysia–Singapore Second Link...</span></p>

span {
  border: 2px solid;
  border-image: linear-gradient(45deg, #eeb075, #2d4944) 1;
  background: #eef6f3;
  padding: .5em 1.3em;
  box-decoration-break: clone;
}

查看 CodePen 上 Preethi (@rpsthecoder) 编写的笔 带有 box-decoration-break 的内联边框图像。

我们可以利用的另一种装饰单个行的行为是轮廓的行为。在受支持的浏览器中，box-decoration-break可以为文本的每一行添加轮廓，包括断开的边缘，这对于创建双色虚线边框很有用。

<p><span>Cloud Forest replicates...</span></p>

span {
  outline: 2px dashed rgb(216,255,248);
  box-shadow: 0 0 0 2px rgb(39,144,198);
  background: #fffede;
  padding: .5em 1.3em;
  animation: 1s animateBorder ease infinite;
  box-decoration-break: clone;
}

@keyframes animateBorder{
  to{
    outline-color: rgb(39,144,198);
    box-shadow: 0 0 0 2px rgb(216,255,248);
  }
}

查看 CodePen 上 Preethi (@rpsthecoder) 编写的笔 带有 box-decoration-break 的内联轮廓。

如演示中所观察到的，box-decoration-break可以承受动画。

除了边框和背景外，box-decoration-break还可以管理应用于元素的形状。它在内联框中用途不大，可能更适合在列或页面框中使用，尽管该应用在浏览器中尚未得到广泛支持。

但为了展示它的作用，让我们尝试将 clip-path 属性应用于span。

clip-path 属性本身仅被 Firefox 完全支持，因此您可能只能在其中看到预期的结果。但以下是两张图片：在span上应用圆形剪辑路径的结果，分别不使用和使用box-decoration-break。

span {
  clip-path: circle(50% at 202.1165px 69.5px);
  ...
}

span {
  clip-path: circle(50% at 202.1165px 69.5px);
  box-decoration-break: clone;
  ...
}

您会注意到，在第一张图片中，50%半径值是从内联框（最长行）的宽度派生的，其中未使用box-decoration-break。

第二张图片显示了box-decoration-break: clone如何通过基于各行的宽度重新定义50%的计算值，同时保持中心与之前相同。

以下是如何在span上应用clip-path的inset函数（内嵌矩形）分别剪裁它，不使用和使用box-decoration-break。

span {
  clip-path: inset(0);
  ...
}

span {
  clip-path: inset(0);
  box-decoration-break: clone;
  ...
}

不使用box-decoration-break时，只有与最短行长度匹配的第一行的一部分可见，而使用box-decoration-break: clone时，第一行完全可见，而其余部分被剪裁。

因此，如果您想仅显示第一行并隐藏其余行，这可能很有用。但是，正如我之前提到的，此应用更适合于其他类型的框，而不是内联框。无论如何，我想向您展示它的工作原理。

浏览器支持

正如我们在这里看到的，box-decoraton-break非常有用，并打开了大量可能性，例如创建简洁的文本效果。该属性在使用-webkit前缀的情况下得到了很多支持，但在撰写本文时仍处于工作草案阶段，并且在 Internet Explorer 和 Edge 中没有任何支持。您可以在 此处投票 以支持 Edge。

总结

box-decoration-break: clone会将应用于断开的内联框的未断开边缘的任何边框、空间和背景设计复制到其断开的边缘。这会在文本的所有行中创建一致的设计，以统一的方式装饰它们，并且对于我们通常在网站上使用的所有这些简短文本来说非常有用。