box-decoration-break属性

lufficc 发布于2019-04-23 11:41 / 1861人阅读

摘要：就要借助属性。改动如下结果如下可以看到断开的两端都是圆角在布局中，总会存在元素盒子断开的情况，可以决定断开时候的渲染表现。结果如下而默认状态所有行累加为一个渐变在移动端页面，包括小程序中可以放心使用。

box-decoration-break属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。
默认情况下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。举个例子

生命的道路上永远没有捷径可言，只有脚踏实地走下去。

.box { width: 200px; color: #fff; }
.text { border-radius: 30px; line-height: 30px; }
结果如下:

可以看到换行的位置是直直切割，圆角在最开始和最后面。显然每一行都是圆角才更好看。就要借助 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; }
结果如下：

可以看到断开的两端都是圆角：

在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; }
结果如下：

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

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

云服务器 GPU云服务器删除属性设置属性属性编号属性遍历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1012.html

有趣的 box-decoration-break

摘要：可选取值只有两个默认取值换行示例这个属性通常作用于内联元素。这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。因为 MDN 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： box -- 盒，可以理解为元素盒模型 decoration -- 装饰，理解为元素样式 break -- 断行，参考...

cooxer 2019-08-30 15:56 评论0 收藏0
有趣的 box-decoration-break

摘要：当然这里有个小技巧，正常而言，只对元素生效，如果我们的文案像是这样包裹在标签内要使对生效，可以通过设定的来实现。这两天接触到一个很有意思的 CSS 属性 --box-decoration-break。下面就一起去一探究竟。因为MDN上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： box -- 盒，可以理解为元素盒模型 decoration -- 装饰，理解为...

番茄西红柿 2019-04-23 11:48 评论0 收藏0
CSS魔法堂：Box-Shadow 没那么简单啦:)

摘要：阴影距离原位置的垂直位移，正数表示向下移动，负数表示向上移动。实现原理纯个人理解创建一个与元素尺寸一致的阴影盒子将阴影盒子定位到于元素重合，并位于元素之上水平和垂直各画两条线，分别跟元素重合共条分别记为根据和移动。前言说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。二话不说看效果 showI...

Galence 2019-08-30 13:00 评论0 收藏0
关于JavaScript对象，你所不知道的事（二）- 再说属性

摘要：但好在还给我们提供了一个方法，每一个对象都有这样一个方法，专门用来判断某个属性是否是该对象的私有属性。如果你想要用对象字面形式，你只能在创建对象时定义访问器属性。在中，我们使用冻结一个对象，并且使用来判断一个对象是否被冻结。说完了对象那些不常用的冷知识，是时候来看看JavaScript中对象属性有哪些有意思的东西了。不出你所料，对象属性自然也有其相应的特征属性，但是这个话题有点复杂...

Richard_Gao 2019-08-21 17:49 评论0 收藏0
JavaScript之对象属性

摘要：尽管的右操作数是构造函数，但计算过程实际是检测了对象的继承关系。通过创建的对象使用构造函数的属性作为它们的原型。 JavaScript之对象属性 Object.create()继承 ECMAScript 5定义了一个名为Object.create()的方法，它创建一个新对象，其中第一个参数是这个对象的原型。Object.create()提供第二个可选参数，用以对对象的属性进行进一步描...

gekylin 2019-08-23 18:29 评论0 收藏0