CSS - box-decoration-break 属性

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

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

可能的值

slice - 这是默认值。这意味着元素的填充、边框和背景将呈现为内容没有被破坏一样，从而导致跨换行符的连续呈现。
clone - 每个框片段都单独呈现，其定义的边框、填充和边距包裹它。border-radius 和 box-shadow 分别应用于每个片段。当 background-repeat 设置为 no-repeat 时，背景图片可能会单独重复每个片段。

适用于

所有元素。

语法


 box-decoration-break = slice | clone;

CSS box-decoration - 切片值

以下示例演示了 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 - 克隆值

以下示例演示了 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 - 多列布局的碎片化

以下示例演示了一个具有多列布局的块元素，该块元素使用具有不同值的 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>

打印本页