Css 简明教程

CSS - box-decoration-break

CSS box-decoration-break 属性规定元素如何处理字背景、内边距、边框、圆角的细分，这些元素在多个行或列中被分割。它控制这些属性是否应连续或跨行分解。

此属性将影响以下属性的显示：

  1. background

  2. border

  3. border-image

  4. box-shadow

  5. clip-path

  6. margin

  7. padding

Possible Values

  1. slice − 这是默认值。这意味着元素的内边距、边框和背景将按内容未断开的样式进行渲染，从而导致跨行断开的连续渲染。

  2. clone − 每个方框片段都用其自己定义的 border 、 padding 和 margin 来逐一进行渲染。 border-radius 、[role="bare"]css_border-image.html 和 box-shadow 会分别应用于每个片段。当 background-repeat 设置为 no-repeat 时，背景图片可能会逐一为每个片段进行重复。

Applies to

所有元素。

Syntax

box-decoration-break = slice | clone;

CSS box-decoration - slice Value

以下示例演示了在多行中分解时 box-decoration-break: slice 属性如何在方框之间切分 −

<html>
<head>
<style>
   .box {
      background-color: lightpink;
      border: 5px solid green;
      padding:  5px;
      border-radius: 15px;
      line-height: 3;
      -webkit-box-decoration-break: slice;
      box-decoration-break: slice;
   }
</style>
</head>
<body>
   <span class="box">CSS<br>box-decoration-break - <br> slice<br>Value</span>
</body>
</html>

CSS box-decoration - clone Value

以下示例演示了 box-decoration-break: clone 属性如何控制在多个行或列中分解时方框的显示 −

<html>
<head>
<style>
   .box {
      background-color: lightpink;
      border: 5px solid green;
      padding:  5px;
      border-radius: 15px;
      line-height: 3;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
   }
</style>
</head>
<body>
   <span class="box">CSS<br>box-decoration-break - <br> clone<br>Value</span>
</body>
</html>

CSS box-decoration - Fragmentation With Multi-column Layouts

以下示例演示了一个块元素的多列布局，其中 box-decoration-break 属性采用 slice 和 clone 等不同值 −

<html>
<head>
<style>
      span {
      display: block;
      background: lightpink;
      border: 5px solid green;
      padding: 5px;
      border-radius: 20px;
      margin-left: 10px;
      line-height: 2;
   }
   .clone-box {
      -webkit-box-decoration-break: clone;
      -ms-box-decoration-break: clone;
      -o-box-decoration-break: clone;
      box-decoration-break: clone;
   }
   .box {
      -webkit-columns: 3;
      -moz-columns: 3;
      -ms-columns: 3;
      -o-columns: 3;
      columns: 3;
   }
   div {
      width: 63em;
   }
</style>
</head>
<body>
   <h3>Without fragmentation</h2>
   <div >
      <span>CSS<br>box-decoration-break - <br> clone Value</span>
   </div>
   <br>

   <h3>box-decoration-break: slice</h2>
   <div class="box">
      <span>CSS<br>box-decoration-break - <br> clone Value</span>
   </div>

   <h3>box-decoration-break: clone</h3>
   <div class="box">
      <span class="clone-box">CSS<br>box-decoration-break - <br> clone Value</span>
   </div>
</body>
</html>