盒装饰中断 | box-decoration-break (Fragmentation) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    盒装饰中断 | box-decoration-break (Fragmentation) - CSS 中文开发手册

    这是一项实验技术

    由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

    box-decoration-breakCSS属性指定background,padding,border,border-image,box-shadow,margin,和clip-path

    /* Keyword values */
    box-decoration-break: slice;
    box-decoration-break: clone;
    
    /* Global values */
    box-decoration-break: initial;
    box-decoration-break: inherit;
    box-decoration-break: unset;

    初始值

    slice

    应用于

    all elements

    是否继承

    no

    应用媒体

    visual

    计算值

    as specified

    动画类型

    discrete

    规范顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    该box-decoration-break属性被指定为下面列出的关键字值之一。

    取值

    slice该元素被渲染,就好像它的盒子没有被分割,然后这个假设盒子的渲染被分割成每一行/列/页面。请注意,对于每个片段,假设盒子可以是不同的,因为如果在嵌入方向上发生中断,则使用它自己的高度;如果中断发生在块方向上,则使用其自身宽度。有关详细信息,请参阅CSS规范。

    clone每个盒子片段都用指定的边框,填充和边距分别渲染每个片段的border-radius,border-image并且box-shadow,独立地施加到每个片段。背景在这意味着与背景图像的每个片段独立地得出background-repeat:no-repeat可以被重复多次。

    规范语法

    slice | clone

    示例

    内联框片段

    包含换行符的内联元素:

    .example { 
      background: linear-gradient(to bottom right, yellow, green);
      box-shadow:
        8px 8px 10px 0px deeppink, 
        -5px -5px 5px 0px blue, 
        5px 5px 15px 0px yellow;
      padding: 0em 1em;
      border-radius: 16px;
      border-style: solid;
      margin-left: 10px;
      font: 24px sans-serif;
      line-height: 2;
    }
    
    ...
    <span class="example">The<br>quick<br>orange fox</span>

    结果:

    添加box-decoration-break:clone到上面的样式:

      -webkit-box-decoration-break: clone;
      -o-box-decoration-break: clone;
      box-decoration-break: clone;

    Results in:

    您可以在浏览器中尝试上面的两个内联示例。

    这是一个使用大border-radius值的内联元素的例子。第二个"iM"在"i"和之间有一个换行符"M"。为了比较,第一个"iM"没有换行符。请注意,如果将这两个片段的渲染水平叠放在一起,则会导致非碎片渲染。

    在浏览器中试试上面的例子。

    块框片段

    与上面类似风格的块元素,首先没有任何碎片:

    将上面的块分成三列导致:

    请注意,垂直堆叠这些片段将导致非碎片渲染。

    现在用同样的例子 box-decoration-break:clone

    请注意,每个片段具有相同的复制边框,阴影和背景。

    您可以在浏览器中尝试上面的块示例。

    规范

    Specification

    Status

    Comment

    CSS Fragmentation Module Level 3The definition of ‘box-decoration-break‘ in that specification.

    Candidate Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Edge

    Internet Explorer

    Opera

    Safari

    Support on inline elements

    22-webkit

    32.0 (32.0) 1

    No support

    No support

    11.5 2 15-o

    6.1

    Support on non-inline element

    No support

    32.0 (32.0) 1

    No support

    No support

    11.5 2

    No support

    Feature

    Android

    Chrome for Android

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Support on inline elements

    4.4

    (Yes)-webkit

    32.0 (32.0)

    No support

    12 2 15-o

    7.1

    Support on non-inline element

    No support

    No support

    32.0 (32.0)

    No support

    12 2

    No support

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32145.html

    盒装饰中断 | box-decoration-break (Fragmentation) - CSS 中文开发手册 - Break易站

    上一篇:系统 | @counter-style.system (Counter Styles) - CSS 中文开发手册 - Break易站


    下一篇:Android知识点