box-decoration-break
試一試
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
<section id="default-example">
<div id="example-container">
<span id="example-element">This text breaks across multiple lines.</span>
</div>
</section>
#example-container {
width: 14rem;
}
#example-element {
background: linear-gradient(to bottom right, #6f6f6f, black);
color: white;
box-shadow:
8px 8px 10px 0 #ff1492,
-5px -5px 5px 0 blue,
5px 5px 15px 0 yellow;
padding: 0 1em;
border-radius: 16px;
border-style: solid;
margin-left: 10px;
font: 24px sans-serif;
line-height: 2;
}
指定的值將影響以下屬性的顯示：
語法
css
/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;
/* Global values */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;
box-decoration-break 屬性被指定為下面列出的關鍵字值之一。
值
slice-
元素最初渲染時，就好像它的框沒有被碎片化一樣，然後這個假想框的渲染被切片成每行/列/頁的片段。請注意，每個片段的假想框可能不同，因為如果中斷髮生在行內方向，它會使用自己的高度；如果中斷髮生在塊方向，它會使用自己的寬度。有關詳細資訊，請參閱 CSS 規範。
clone-
每個框片段獨立渲染，並帶有指定的邊框、內邊距和外邊距包裹每個片段。
border-radius、border-image和box-shadow獨立應用於每個片段。背景也為每個片段獨立繪製，這意味著帶有background-repeat: no-repeat的背景影像仍可能重複多次。
正式定義
正式語法
box-decoration-break =
slice |
clone
示例
行內框片段
帶有框裝飾的行內元素在包含換行符時，由於初始 slice 值，可能會出現意外的外觀。以下示例展示了將 box-decoration-break: clone 新增到包含 <br> 標籤的 <span> 的效果：
css
span {
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
8px 8px 10px 0px deeppink,
-5px -5px 5px 0px blue,
5px 5px 15px 0px yellow;
}
#clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html
<p>
<span>The<br />quick<br />orange fox</span>
</p>
<p>
<span id="clone">The<br />quick<br />orange fox</span>
</p>
塊框片段
以下示例展示了帶有框裝飾的塊級元素在多列布局中包含換行符時的外觀。請注意，如果垂直堆疊，box-decoration-break: slice 的結果將等同於第一個 <div>。
css
span {
display: block;
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
inset 8px 8px 10px 0px deeppink,
inset -5px -5px 5px 0px blue,
inset 5px 5px 15px 0px yellow;
}
#base {
width: 33%;
}
.columns {
columns: 3;
}
.clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html
<div id="base">
<span>The<br />quick<br />orange fox</span>
</div>
<br />
<h2>'box-decoration-break: slice'</h2>
<div class="columns">
<span>The<br />quick<br />orange fox</span>
</div>
<h2>'box-decoration-break: clone'</h2>
<div class="columns">
<span class="clone">The<br />quick<br />orange fox</span>
</div>
規範
| 規範 |
|---|
| CSS Fragmentation Module Level 3 # break-decoration |
瀏覽器相容性
載入中…