<del id="cioay"></del>

box-decoration-break屬性

lufficc 發布于2019-04-23 11:41 / 1948人閱讀

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

?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云服務器刪除屬性設置屬性屬性編號屬性遍歷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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