box-decoration-break屬性

lufficc 發(fā)布于2019-04-23 11:41 / 1957人閱讀

摘要：就要借助屬性。改動如下結(jié)果如下可以看到斷開的兩端都是圓角在布局中，總會存在元素盒子斷開的情況，可以決定斷開時候的渲染表現(xiàn)。結(jié)果如下而默認狀態(tài)所有行累加為一個漸變在移動端頁面，包括小程序中可以放心使用。

?box-decoration-break屬性可以指定元素片段在跨行、跨列或跨頁（如打?。r候的樣式渲染表現(xiàn)。
默認情況下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。舉個例子

生命的道路上永遠沒有捷徑可言，只有腳踏實地走下去。

.box { width: 200px; color: #fff; }
?.text { border-radius: 30px; line-height: 30px; }
結(jié)果如下:

可以看到換行的位置是直直切割，圓角在最開始和最后面。顯然每一行都是圓角才更好看。就要借助?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; }
結(jié)果如下：

可以看到斷開的兩端都是圓角：
?
在CSS布局中，總會存在元素box盒子斷開的情況（page/column/region/line），box-decoration-break可以決定斷開時候的渲染表現(xiàn)。
當(dāng)然，只能影響一下部分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屬性，我們可以實現(xiàn)整體漸變效果。

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