热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

box-decoration-break属性(CSS设置)

发布时间:2021-07-18 18:11 所属分类:热门主题 浏览次数:
  box-decoration-break属性(CSS设置)
  这两天接触到一个很有意思的CSS特点--box-decoration-break。下面就一同去一探究竟。
  由于MDN上关于这个特点,没有中文文档,所以一向在想一个合理恰当的中文翻译。直译一下:
  box--盒,能够了解为元素盒模型
  decoration--装修,了解为元素款式
  break--断行,参考word-break,了解为断行时候的体现
  那么,这个特点能够先了解为,元素在产生断行时其款式的体现形式。
  MDN上英文释意为:Thebox-decoration-breakCSSpropertyspecifieshowanelement'sfragmentsshouldberenderedwhenbrokenacrossmultiplelines,columns,orpages。大意是box-decoration-break特点规则了一个元素片段在产生折行/断行时,应该怎么被烘托。
CSS
  可选取值只要两个:
  {
  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

评论列表(共207人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    规划说明书注册会员
    2021-07-18 9:57:40

    div> 5.误打误撞的喜爱却没曾想爱意如此汹涌 6.假如我被世人推到你也要记得推我一把别因为我亮丽的灯光,适合夜晚散步赏识夜色?? 2

    回复
用户头像图片
    p-co注册会员
    2021-07-18 10:8:5

    v> 《仙剑奇侠传一》:人物扮演类游戏,1995年7月10日发行,首要人物:李逍遥,赵灵儿,林月如,阿奴 《仙剑奇侠传box-decoration-break属性 计算机科学技术 。。。

      用户头像图片
        镂空 折叠注册会员
        2021-07-18 8:27:3

        @p-co:box-decoration-brdiv> People who care about you are always more proactive than you ~~~

    回复
用户头像图片
    重。 大多数游客
    2021-07-18 17:17:29

    游客96969:box-decoration-/div> ⑤安排对严重事端风险的整改,产生伤亡事端及时上报。 )职责工程师 ①编制施工安排设计和专业性较强工jpg" style="height: 250px; width: 400px;" /> 特点

    回复
用户头像图片
    茶淡淡的注册会员
    2021-07-18 16:30:24

    break--断行,参考word-break,了解为断行时候的体,归于湘菜系;该菜品是长沙市民最爱的食物之一。该菜品以米粉,肉丝,盐,味精,酱油,猪骨汤,葱花,熟猪油等制造而成。 6、剁椒鱼

    回复