绚烂的文本换行，打破常规元素背景填充规则

在我们的日常开发中，为一个元素设置背景、边框、阴影、内外边距等，通常是会应用在整个元素上；

例如我为一个元素设置一个背景图，根据背景图的填充规则设定，这个图片可能会出现重复，或者拉伸，或者多余的地方留白等等；

现在我带来一个新的效果，将元素设置背景、边框、阴影、内外边距等应用在每一行文字上。

就是下面的效果：

背景、边框、阴影、内外边距

我们先来为一个元素设置背景、边框、阴影、内外边距，先来看看效果：

<style>
    .container {
    
    
        background: linear-gradient(120deg, #0029FF 0%, #001270 100%),
        radial-gradient(100% 222% at 0% 100%, #CD04FF 0%, #FF004D 57%),
        linear-gradient(270deg, #F2096B 0%, #ED0B0B 100%),
        linear-gradient(300deg, #C478B3 0%, #EA2856 100%),
        radial-gradient(90% 110% at 100% 100%, #96A300 45%, #875901 100%),
        linear-gradient(6.54deg, #20ADFD 7%, #1700A4 50%);
        background-blend-mode: exclusion, color-dodge, color-burn, color-burn, color-dodge, normal;
        border: 1px solid #000;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
        padding: 20px;
        margin: 20px;
        color: #fff;
    }
</style>

<div class="container">
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
    这个里面随便来点内容，多来一点；
</div>

这个效果看起来真不错呀，但是这个效果是应用在整个元素上的，如果我想再追求一下效果，我要将这个效果应用在每一行文字上；

可能有小伙伴会想到将每一行文本单独放在一个元素里，然后再设置背景、边框、阴影、内外边距等；

这样做的确可以实现，但是这样做的话，这个单独的元素里面的内容也可能会换行呀，还得用上javascript来控制；

这里我推出一个新的方法，就是使用box-decoration-break属性，这个属性可以将元素的背景、边框、阴影、内外边距等应用在每一行文字上；

看效果

还是上面的代码，我们只需要将box-decoration-break属性设置为clone即可；

.container {
   
   
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
}

注意：因为这个属性只能在display为inline的元素上使用，所以我们需要将display设置为inline；
同时，上面加上兼容性前缀并不是用来兼容，而是加了和不加的效果是不一样的，很神奇的设定，建议大家自行测试一下；

效果如下：

虽然这个效果看起来不咋地，因为都重叠到一起了，为啥会重叠到一起？接下来就来详解一下这个属性；

box-decoration-break

box-decoration-break属性是用来控制元素的背景、边框、阴影、内外边距等是否应用在每一行文字上；

看这段描述，再加上我们设置的样式，我们设置的每一个样式都应用在这个属性上面了。

来看看这个属性的取值：

• slice：将元素的背景、边框、阴影、内外边距等应用在整个元素上；
• clone：将元素的背景、边框、阴影、内外边距等应用在每一行文字上；

这个属性的取值只有两个，这两个有什么区别呢？

我们直接看效果，上面贴的图就是clone的，现在贴的是slice：

• slice的效果是将背景、边框、阴影、内外边距等应用在整个元素上，同时会将文字分割成多行，设置的样式也是分割处理；
• clone的效果是将背景、边框、阴影、内外边距等应用在每一行文字上，每一行的文字样式都是相同的。

现在效果也看了，用法也知道了，那就再来看看约束吧。

box-decoration-break 的约束

上面提到了两次，这个属性只能在display为inline的元素上使用，这是第三遍提示，别设置了没用来找我。

它的作用范围，也就是影响的属性，有以下几个：

• background
• border
• border-image
• box-shadow
• clip-path
• padding
• margin

除了这些属性，其他的属性都不受影响。

除了上面这两点，还有就是兼容性前缀的问题，这个问题我在上面已经提到了，兼容性前缀不是为了兼容，而是为了让效果更好，这也算是兼容性的一种吧。

box-decoration-break 的兼容性

上面正好提到了兼容性，那就来看看兼容性吧：

简直是一团糟，但是咱们自己玩玩有什么关系呢？也不妨碍我现在了解，未来用呀。

来点效果

上面我们已经知道了这个属性的作用，那现在我们就用它来实现一下效果吧：

代码片段

这上面的效果除了使用了box-decoration-break属性，还使用了background-clip属性，这个属性是用来控制背景的显示范围的，这个属性的取值有以下几个：

• border-box：背景将延伸到边框下面；
• padding-box：背景将延伸到内边距下面；
• content-box：背景将延伸到内容下面；
• text：背景将延伸到文字下面。

这个属性我看有好多博主都写了，我就不嫌丑了。