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、剁椒鱼
回复