小码哥的IT人生

CSS box-decoration-break 属性 详解

css3基础 2022-07-14 16:03:16小码哥的IT人生shichen

CSS box-decoration-break 属性

定义和用法

box-decoration-break 属性规定当元素框被分段时,如何应用元素的 background、padding、border、border-image、box-shadow、margin 以及 clip-path。

实例

规定 box-decoration-break 属性:

span.ex1 {
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
span.ex2 {
  -webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
  box-decoration-break: slice;
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  border: 5px solid red;
  padding:  0em 1em;
  border-radius: 16px;
  font-size: 24px;
  line-height: 2;
}
span.ex1 {
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
span.ex2 {
  -webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
  box-decoration-break: slice;
}
</style>
</head>
<body>
<h1>box-decoration-break 属性</h1>
<h2>box-decoration-break: clone:</h2>
<span class="ex1">CSS<br>is<br>easy<br>to learn</span>
<h2>box-decoration-break: slice (默认):</h2>
<span class="ex2">CSS<br>is<br>easy<br>to learn</span>
<p><b>注释:</b>IE/Edge 不支持 box-decoration-break 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

CSS 语法

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

属性值

描述
slice 默认。框装饰作为整体应用于元素,并在元素片段的边缘断裂。
clone

框装饰适用于元素的每个片段,就像片段是单个元素一样。

边框包裹元素的每个片段的四个边缘,并且完整地重绘每个片段的背景。

initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: slice
继承:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS3

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

跟随 -webkit- 的数字规定使用前缀的首个版本。

Chrome IE / Edge Firefox Safari Opera
22.0 -webkit- 79.0 32.0 6.1 -webkit- 11.5 -webkit-

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024