CSS box-decoration-break 属性


实例

规定 box-decoration-break 属性:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. span {
  6. border: 5px solid red;
  7. padding: 0em 1em;
  8. border-radius: 16px;
  9. font-size: 24px;
  10. line-height: 2;
  11. }
  12. span.ex1 {
  13. -webkit-box-decoration-break: clone;
  14. -o-box-decoration-break: clone;
  15. box-decoration-break: clone;
  16. }
  17. span.ex2 {
  18. -webkit-box-decoration-break: slice;
  19. -o-box-decoration-break: slice;
  20. box-decoration-break: slice;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <h1>box-decoration-break 属性</h1>
  26. <h2>box-decoration-break: clone:</h2>
  27. <span class="ex1">CSS<br>is<br>easy<br>to learn</span>
  28. <h2>box-decoration-break: slice (默认):</h2>
  29. <span class="ex2">CSS<br>is<br>easy<br>to learn</span>
  30. <p><b>注释:</b>IE/Edge 不支持 box-decoration-break 属性。</p>
  31. </body>
  32. </html>

定义和用法

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

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

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。跟随 -webkit- 的数字规定使用前缀的首个版本。

属性
box-decoration-break22.0 -webkit-79.032.06.1 -webkit-11.5 -webkit-

CSS 语法

  1. box-decoration-break: slice|clone|initial|inherit|unset;
属性值
描述
slice默认。框装饰作为整体应用于元素,并在元素片段的边缘断裂。
clone

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

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

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

分类导航