CSS 属性

CSS box-decoration-break 属性指定当内容跨多行或多列时，元素的背景、填充、边框和边框半径应如何表现。它控制这些属性是应该连续还是跨换行符分段。

此属性将影响以下属性的外观:

属性值

  • slice: 这是默认值。这意味着元素的内边距、边框和背景将被渲染为内容没有被破坏，从而导致跨行连续渲染。

  • clone: 每个框片段以其定义的border、padding和margin 包裹它。 border-radius、 和 box-shadow 分别应用于每个片段。当background-repeat设置为no-repeat时，背景图片可能会为每个片段单独重复。

适用范围

所有元素。

语法

box-decoration-break = slice | clone;

CSS box-decoration: slice 

以下示例演示了 box-decoration-break:当跨多行断开时，切片属性在框之间进行切片 -

<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

以下示例演示了 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-break

以下示例演示使用具有不同值的 box-decoration-break 属性（例如切片和克隆）的多列布局的块元素 -

<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>