CSS/CSS3 box-decoration-break属性简介

这篇文章发布于 2019年01月5日,星期六,18:04,归类于 CSS相关。 阅读 20281 次, 今日 1 次 9 条评论

 

一、box-decoration-break属性简介

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现。

默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分。

举个例子,如下HTML和CSS:

<div class="box">
  <span class="text">专门弄了个社交专用的微信号:zhangxinxu-job</span>
</div>
.box { width: 200px; color: #fff; }
.text { border-radius: 30px; background-color: #cd0000; }

结果如下(实时渲染):

专门弄了个社交专用的微信号:zhangxinxu-job

可以看到换行的位置是直直切割,圆角在最开始和最后面(如下截图箭头标记):

圆角首尾各一个

有些丑!

设计师看不下去了,拿着40米的大刀走过来,说道:“哎呀,王哥,上面一行和下面一行两端都是圆角显然要更好看,可不可以实现啊?”

这个时候就体现出CSS基础知识的重要性了。

是可以实现的,就是借助CSS box-decoration-break属性。

CSS改动如下:

.box { width: 200px; color: #fff; }
.text { 
  border-radius: 30px; background-color: #cd0000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

结果如下(实时渲染):

专门弄了个社交专用的微信号:zhangxinxu-job

可以看到断开的两个内联盒子两端都是圆角:

上下内联盒子左右都是圆角

二、box-decoration-break语法

在CSS布局中,总会存在元素box盒子断开的情况(page/column/region/line),box-decoration-break可以决定断开时候的渲染表现。

当然,只能影响部分CSS的渲染,都有哪些呢?

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

等。

box-decoration-break语法如下:

box-decoration-break: slice;  /* 默认值 */
box-decoration-break: clone;

其中

slice
slice是切片,分割的意思。默认值。表示各个盒子断开的部分如同切割开一般。
clone
clone是克隆,独立的意思。表示断开的各个盒子样式独自渲染。

三、跨列渲染demo案例

下面看一个跨列的样式案例。

如下HTML:

<div class="box">
    <p class="text">2018年...</p>
</div>

我们只要column布局使两列显示,同时设置p元素有边框:

.box {
    columns: 2;
}
.text {
    border: 5px solid #cd0000;
}

此时如下图,布局break处无边框,表现为slice。

columns布局边框断开

此时,我们设置box-decoration-break属性值为clone,结果会怎么样呢?在Firefox浏览器下如下:

两列分别边框截图

左右两栏内容分别呈现红色边框,符合我们的预期。

您可以狠狠地点击这里:box-decoration-break跨列布局渲染demo

//zxx: 经过测试,在Chrome浏览器下并没有表现出预期的效果,应该是渲染上的bug。把p标签改成span这种内联标签倒是有预期的效果,可惜按钮toggle样式的时候并不会重渲染,相信以后会修复这个问题的。

理论上CSS Regions布局也能有类似渲染,只是由于CSS Regions布局各大浏览器已经放弃了支持,本文不展示相关案例。

四、实际应用案例

借助box-decoration-break属性,我们可以实现不规则的内联文本整体渐变效果。

效果如下截图:

内联文本的渐变效果

您可以狠狠地点击这里:box-decoration-break文本不规则渐变demo

其中,关键CSS就是设置内联元素的box-decoration-breakclone,如下示意:

.text {
    padding: 5px;
    background-image: linear-gradient(to right, blue, red 200px);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

而默认状态下,内联元素换行渐变效果是这样的,上下行累加为一个渐变,而不是每一行都是渐变:

默认渐变效果

五、兼容性、结语

CSS box-decoration-break属性兼容性如下图:

box-decoration-break兼容性截图

在移动端页面,包括小程序中可以放心使用。Android,Chrome等浏览器下还需要-webkit-私有前缀,Firefox浏览器完全支持。

没有结语。

(本篇完)

分享到:


发表评论(目前9 条评论)

  1. 大志说道:

    学习了,感谢分享!另外,文章页怎么不加个返回顶部的按钮呢,增加阅读体验哈

  2. gx说道:

    hao

  3. sdx说道:

    button.addEventListener(‘click’, function () {
    var cssValue = this.getAttribute(‘data-value’);
    if (cssValue == ‘clone’) {
    text.classList.add(‘clone’);
    this.setAttribute(‘data-value’, ‘slice’);
    } else {
    text.classList.remove(‘clone’);
    this.setAttribute(‘data-value’, ‘clone’);
    }
    });

    ↑ 请问button在哪呢

  4. Lucky说道:

    666

  5. Lucky说道:

    刚刚试了一下Chrome,块级元素 display:inine; 就生效了, 不过有裁切

  6. mfk说道:

    最近产量有点低。黎叔很生气

  7. Jack说道:

    很不错

  8. DeathGhost说道:

    😃😃😃😃😃😃每日一览😃😃😃😃😃😃😃