box-decoration-break属性(CSS设置)
box-decoration-break属性(CSS设置)
这两天接触到一个很有意思的CSS特点--box-decoration-break。下面就一同去一探究竟。
由于MDN上关于这个特点，没有中文文档，所以一向在想一个合理恰当的中文翻译。直译一下：
box--盒，能够了解为元素盒模型
decoration--装修，了解为元素款式
break--断行，参考word-break，了解为断行时候的体现
那么，这个特点能够先了解为，元素在产生断行时其款式的体现形式。
MDN上英文释意为：Thebox-decoration-breakCSSpropertyspecifieshowanelement'sfragmentsshouldberenderedwhenbrokenacrossmultiplelines,columns,orpages。大意是box-decoration-break特点规则了一个元素片段在产生折行/断行时，应该怎么被烘托。
可选取值只要两个：
{
box-decoration-break:slice;//默许取值
box-decoration-break:clone;
}
换行示例
这个特点通常作用于内联元素。假定咱们存在如下结构，并且给它添加一个边框：
<span>ABCDEFGHIJKLMNspan>
span{
border:2pxsolid#999;
}
嗯，作用如下，平平无奇：
image
好，接下来就是break，咱们把上面一行的文字断行，款式不变：
<span>ABCD<br/>EFG<br/>HI<br/>JKLMNspan>
得到如下成果：
image
O，能够看到，文字换行的同时，边框也随之改变，头尾两行都有3边边框，中心两行只要上下两头边框。假如将4行合起来，能够拼成图一，这个是正常的展现作用。
接下来，咱们加上本文的主角box-decoration-break:clone：
span{
border:2pxsolid#999;
+box-decoration-break:clone;
}
收效后，咱们将会得到这样的成果：
image
box-decoration-break:clone运用小结
看到这儿，咱们已经能够大概了解这个特点的作用了：
运用了box-decoration-break:clone的内联元素，假如存在折行显示，那么每一行都将拥有原本单行的一切完整款式。
再看个比如加深下了解，存在如下结构，其运用了box-decoration-break:clone前后两种作用：
<span>每一行<br/>款式<br/>都<br/>坚持<br/>完整独立span>
image
CodePenDemo--box-decoration-break
box-decoration-break:clone收效款式影响范围
当然，运用了box-decoration-break:clone的元素并非对每一个款式都会收效，只会作用于下列款式：
background
border
border-image
box-shadow
clip-path
margin
padding
Syntax
box-decoration-break:clone实际运用
接下来看看，有没有什么靠谱的实际运用场景。
box-decoration-break:clone完成文本选中作用
会有这样的场景，咱们期望对一个多行文本中的特定一段文本进行侧重展现。这个时候，咱们能够经过
嵌套，对包裹的文字进行一些特定的展现。
比如咱们有这样一段案牍：
<p>
The<span>box-decoration-breakspan>CSSpropertyspecifieshowanelement'sfragmentsshouldberenderedwhenbrokenacrossmultiplelines,columns,orpages..Eachboxfragmentisrenderedindependentlywiththe<span>specifiedborder,padding,andmarginwrappingeachfragment.span>Theborder-radius,border-image,andbox-shadowareappliedtoeach<span>fragmentindependently.span>
p>
其间，咱们将需求着重的内容经过标签包裹起来，赋予特定款式并且加上box-decoration-break:clone，这样，不管着重案牍是否换行，每一处的着重背景都是一致的：
p{
font-size:22px;
line-height:36px;
}
span{
background-image:linear-gradient(135deg,deeppink,yellowgreen);
color:#fff;
padding:2px10px;
border-radius:50%3em50%3em;
box-decoration-break:clone;
}
得到如下作用：
image
假如不加box-decoration-break:clone呢？那么假如存在换行，作用会大打折扣：
image
CodePenDemo--text-decoration-break文本选中作用
box-decoration-break每行文字带特定边框
又会有这样的场景，咱们期望每一行案牍都带有特定的边框款式，像这样：
image
怎么完成呢？也许能够每一行都是一个
，每一行
设定上述款式。但是假如文本内容不确定，容器的宽度也不确定呢？
这种场景，运用box-decoration-break也十分快捷。当然这儿有个小技巧，正常而言，box-decoration-break:clone只对inline元素收效，假如咱们的案牍像是这样包裹在
标签内：
<p>
Thebox-decoration-breakCSSpropertyspecifieshowanelement'sfragmentsshouldberenderedwhenbrokenacrossmultiplelines,columns,orpages..Eachboxfragmentisrenderedindependentlywiththespecifiedborder,padding,andmarginwrappingeachfragment.Theborder-radius,border-image,andbox-shadowareappliedtoeachfragmentindependently.
p>
要使box-decoration-break:clone对
收效，能够经过设定
的display:inline来完成。如此一来，要完成上述作用，咱们只需求：
p{
display:inline;
box-decoration-break:clone;
background:linear-gradient(110deg,deeppink0%,deeppink98%,transparent98%,transparent100%);
}
不管文本内容或许容器宽度怎么改变，都能完美适配：
box-deraction-break
CodePenDemo--box-decoration-break每行文字带特定边框
box-decoration-break结合过渡动画
结合上面的内容，咱们还能够考虑将box-decoration-break与过渡作用或许动画作用结合起来。
比如，咱们期望当咱们hover文字内容的时候，一些要点需求展现的文字阶段能够被着重展现，可能是这样：
box-deraction-break-hover
CodePenDemo--box-decoration-break过渡动画
又或许是这样：
box-deraction-break-hover2
CodePenDemo--box-decoration-break结合过渡动画
你能够尝试点进Demo，然后去掉box-decoration-break:clone，会发现作用大打折扣。
兼容性
额，按照惯例兼容性应该都不太行。并且MDN也给出了这样的提示：
Thisisanexperimentaltechnology.ChecktheBrowsercompatibilitytablecarefullybeforeusingthisinproduction.
看看CanIUse，其实还好，除了IE系列全军覆没，所以能够考虑运用在移动端。即使这个特点不兼容，降级展现对页面不会造成什么影响：
image
别的，本文中，给出的代码都是box-decoration-break:clone，CodePen自带了autoprefixer实际中可能需求写成：
{
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
最后
国内看到了大漠老师和张鑫旭大大都已经写过这个特点，大家能够对比着看看，加深了解：
CSS/CSS3box-decoration-break特点简介
初探box-decoration-break
更多精彩CSS技术文章汇总在我的Github--iCSS，继续更新，欢迎点个star订阅收藏。
好了，本文到此结束，期望对你有协助:)
假如还有什么疑问或许主张，能够多多交流，原创文章，文笔有限，孤陋寡闻，文中若有不正之处，万望告知。
作品标签： CSS
优秀作品：
最新作品：
评论列表（共196人参与）参与讨论或分享设计作品获得视觉癖积分奖励
规划说明书注册会员
2021-07-18 5:45:53
div> 5.误打误撞的喜爱却没曾想爱意如此汹涌 6.假如我被世人推到你也要记得推我一把别因为我亮丽的灯光，适合夜晚散步赏识夜色?? 2
回复
p-co注册会员
2021-07-18 23:36:56
重。 大多数游客
2021-07-18 20:26:14
游客19940：box-decoration-/div> ⑤安排对严重事端风险的整改，产生伤亡事端及时上报。 ）职责工程师 ①编制施工安排设计和专业性较强工jpg" style="height: 250px; width: 400px;" /> 特点
回复
茶淡淡的注册会员
2021-07-18 15:1:29
break--断行，参考word-break，了解为断行时候的体，归于湘菜系；该菜品是长沙市民最爱的食物之一。该菜品以米粉，肉丝，盐，味精，酱油，猪骨汤，葱花，熟猪油等制造而成。 6、剁椒鱼
回复