CSS行元素的截断样式box-decoration-break属性，有点儿意思！
<p>一、行元素</p><p>在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。</p>
<p>常用行内元素：a、span、i、em、strong、img等。</p>
<p>二、行元素截断样式</p>
<p>假如有下面一篇文章，给文章中的优美语句设置高亮。代码如下：</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content {
width: 600px;
margin: 0 auto;
line-height: 2;
}
.highlight {
background: linear-gradient(#d5e8b7, #bad6b3);
border: 1px solid #7e876b;
padding: 0 4px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="content">
<p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。</p>
<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。</p>
<p>
<span class="highlight">桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。</span>野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
</p>
<p>
<span class="highlight">“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。</span>
</p>
</body>
</html>
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMobl4RYzRfoPSO1BrT1ibSRuda0x5ZgGx86RXBQNYlq3e3Pe0j7MbZkibwyrAAPtXCoF5ZzyksG7cE4w/640?wx_fmt=png&from=appmsg&random=0.5529210950109558&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>▲ 效果图-1</p>
<p>从上图看到，结尾截断处和换行开始位置的样式并不美观，看起来并那么舒服，如果想要和一段高亮开始和结尾的位置样式保持一样，也加上边框圆角，用CSS可以是实现吗？</p>
<p>当然可以了！只需要在 .highlight 加上如下一行CSS即可。</p>
<pre><code>box-decoration-break: clone;
-webkit-box-direction-break: clone;
</code></pre>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMobl4RYzRfoPSO1BrT1ibSRudJvSaKXT9fqwOrk5fAsqlFF7D5RjPNA0AG3X87rZWqBsgLjdA1JiaYKg/640?wx_fmt=png&from=appmsg&random=0.9822732544813975&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>三、box-decoration-break</p>
<p><code>box-decoration-break</code> 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。</p>
<p>box-decoration-break主要用于指定背景（background）、外边距（margin）、内边距（padding）、边框（border）、边框图片（border-image）、盒阴影（box-shadow）和裁剪（clip-path）样式在行内元素中的渲染方式。</p>
<p>box-decoration-break属性的语法如下：</p>
<pre><code>box-decoration-break: slice | clone | initial | inherit;
</code></pre>
<ul>
<li>slice：默认值。当元素跨越多行、多列或跨页时，其背景、边框等样式会在每个片段的开始和结束处被裁剪，导致视觉上的不连续。</li>
<li>clone：当元素跨越多行、多列或跨页时，每个片段都会独立地渲染其背景、边框等样式，从而保持视觉上的连续性。</li>
<li>initial：将属性设置为其默认值。</li>
<li><strong><strong>inherit</strong></strong>：从父元素继承该属性的值。</li>
</ul>
<p>需要注意的是，box-decoration-break属性在一些较旧的浏览器版本中可能不受支持。因此，在使用该属性时，需要确保目标浏览器版本支持该属性。另外，在某些浏览器中（如Chrome），可能需要添加浏览器前缀（如-webkit-）来确保属性的兼容性。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMobl4RYzRfoPSO1BrT1ibSRudC56xkzzTUaIibCgPOG34mwOYZpbGbIU9pWdfYfnhXeZ2JKu4SicQFNHw/640?wx_fmt=png&from=appmsg&random=0.48015253290693605&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>每天学习一个小知识，生活多姿又多彩！</p>
页:
[1]