欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

box-decoration-break属性

程序员文章站 2022-12-28 08:49:14
box-decoration-break属性可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现。默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分。举个例子
生命的道路上永远没有捷径可言,只有脚踏实地走下去。< ......

 box-decoration-break属性可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现。
默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分。举个例子
<div class="box"> <span class="text">生命的道路上永远没有捷径可言,只有脚踏实地走下去。</span> </div>
.box { width: 200px; color: #fff; }
 .text { border-radius: 30px; line-height: 30px; }
结果如下:

box-decoration-break属性

可以看到换行的位置是直直切割,圆角在最开始和最后面。显然每一行都是圆角才更好看。就要借助 box-decoration-break属性。
css改动如下:

.box { width: 200px; color: #fff; }
 .text { border-radius: 30px;
            line-height: 30px; -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;断开的各个盒子样式独自渲染。
 
借助box-decoration-break属性,我们可以实现整体渐变效果。

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

box-decoration-break属性

而默认状态所有行累加为一个渐变;

box-decoration-break属性

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