CSS Box Decoration Break 来救援

在重新设计这个博客的时候，我设计了这个看起来很酷的标题效果。

稍后我会解释如何重现这种效果，然后我们将深入探讨一个差点让我取消这种效果的问题。

如何创建文本背景效果

这种效果的理念是为文本添加背景，背景能够完美地环绕文字。

我将展示 Tailwind 中的代码，同时也会解释其中的关键部分。

主要设置如下所示：

<h1 class="bg-purple-600 text-white text-3xl rounded-md font-bold inline px-2">Your content here</h1>

这样就能达到我们在上图中看到的效果。

主要效果是结合了display: inline我们设置的背景颜色。
我们使用圆角来使其看起来更精致。

当前的问题

当然，这种神奇的效果必然存在问题。
而这个问题很快就在移动设备上暴露出来。

这个想法很棒，但是文字两侧被截断真的非常烦人。

嗯，我想这也在意料之中，对吧？😩

由于所有内容都只有一个元素，只有一行文本，因此内边距仅应用于该行的开头和结尾。

这时，我考虑过去掉这个效果或者改变它的外观。

直到一位名叫“盒子装饰破坏者”的超级英雄出现！
它完美地实现了我们想要的功能！

这项神奇的功能有两种状态：

1. slice元素被视为一个整体（所以我们看到的现象）
2. clone元素被拆分成多个片段，每个片段都有自己的样式副本。

我们需要的是克隆功能，让我们看看它的效果如何。

要添加它，只需添加以下类名：box-decoration-clone。（或box-decoration-slice）

作为回报，这将为未使用 Tailwind 的用户添加以下 CSS 类。

.box-decoration-clone {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

就是这样，效果好多了！
我太高兴找到这个超棒的CSS属性了，它让我的页眉看起来棒极了。

你可以在这个 CodePen 上看到完整的代码示例。

浏览器支持

其实支持情况还不错，虽然在某些浏览器上只有部分支持，但考虑到它的功能，看到如此广泛的支持真的很高兴：

感谢阅读，让我们保持联系！

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。