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

打印页面

上一个

下一个