CSS - box-decoration-break 屬性

CSS 的 box-decoration-break 屬性指定了當元素內容跨多行或多列斷開時，元素的背景、邊框、邊框影像、盒陰影、外邊距、內邊距和剪輯路徑應該如何表現。它控制著這些屬性在換行處應該是連續的還是分段的。

語法

box-decoration-break: slice | clone | initial | inherit;

屬性值

值	描述
slice	這意味著元素的內邊距、邊框和背景將像內容未斷開一樣呈現，導致在換行處連續呈現。預設值
clone	每個盒片段都單獨呈現，其定義的邊框、內邊距和外邊距將其包裹起來。邊框半徑和盒陰影分別應用於每個片段。
initial	將其設定為屬性的預設值。
inherit	從父元素繼承該屬性。

CSS 盒裝飾中斷屬性示例

以下示例說明了使用不同值的 box-decoration-break 屬性。

使用 Slice 值的盒裝飾中斷屬性

為了使盒裝飾屬性連續呈現，以便它們在元素片段的邊緣處斷開，我們使用 slice 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      span {
         -webkit-box-decoration-break: slice;
         box-decoration-break: slice;
      }

      .box {
         background-color: lightblue;
         border: 5px solid green;
         padding: 10px;
         border-radius: 15px;
         line-height: 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-decoration-break property
   </h2>
   <span class="box">
         CSS
      <br>
         box-decoration-break property 
      <br> 
         with slice
      <br>
         Value. 
      <br>
         See how the 
      <br> 
         properties are applied 
      <br>
         to the elements.
   </span>
</body>

</html>

使用 Clone 值的盒裝飾中斷屬性

為了讓每個單獨的元素片段分別具有單獨的盒裝飾屬性，我們使用 clone 值。該值將跨多行斷開的每個元素視為單個元素，並將屬性應用於每個元素。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      span {
         -webkit-box-decoration-break: clone;
         box-decoration-break: clone;
      }

      .box {
         background-color: lightblue;
         border: 5px solid green;
         padding: 10px;
         border-radius: 15px;
         line-height: 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS box-decoration-break property
   </h2>
   <span class="box">
      CSS
   <br>
      box-decoration-break property 
   <br> 
      with clone
   <br>
      Value. 
   <br>
      See how the 
   <br> 
      properties are applied 
   <br>
      to the elements.
   </span>
</body>

</html>

支援的瀏覽器

屬性
box-decoration-break	22.0	79.0	32.0	6.1	11.5

css_properties_reference.htm

列印頁面

上一個

下一個