这篇文章发布于 2019年01月5日,星期六,18:04,归类于 CSS相关。 阅读 22418 次, 今日 7 次 9 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8346
本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
一、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; }
结果如下(实时渲染):
可以看到换行的位置是直直切割,圆角在最开始和最后面(如下截图箭头标记):
有些丑!
设计师看不下去了,拿着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;
}
结果如下(实时渲染):
可以看到断开的两个内联盒子两端都是圆角:
二、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。
此时,我们设置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-break
为clone
,如下示意:
.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
属性兼容性如下图:
在移动端页面,包括小程序中可以放心使用。Android,Chrome等浏览器下还需要-webkit-
私有前缀,Firefox浏览器完全支持。
没有结语。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8346
(本篇完)
- 写给自己看的CSS columns分栏布局教程 (0.480)
- 基于CSS3 column多栏布局实现水平滑页翻页交互 (0.465)
- CSS columns轻松实现两端对齐布局效果 (0.464)
- CSS gap属性进化史 (0.448)
- 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现 (0.287)
- 纯CSS实现蜡烛、火焰以及熄灭后烟雾效果 (0.281)
- 使用CSS3绘制我们的太阳系 (0.266)
- 需警惕CSS3属性的书写顺序 (0.266)
- 深入理解CSS3 gradient斜向线性渐变 (0.219)
- 几种CSS渐变背景图片transtion动画方法 (0.219)
- CSS实现文字下面波浪线动画效果 (RANDOM - 0.015)
学习了,感谢分享!另外,文章页怎么不加个返回顶部的按钮呢,增加阅读体验哈
hao
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在哪呢
666
刚刚试了一下Chrome,块级元素 display:inine; 就生效了, 不过有裁切
厉害了
最近产量有点低。黎叔很生气
很不错
??????每日一览???????