非常教程

CSS参考手册

片段模块 | Fragmentation

盒装饰中断 | box-decoration-break

这是一项实验技术

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

box-decoration-breakCSS属性指定backgroundpaddingborderborder-imagebox-shadowmargin,和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-radiusborder-image并且box-shadow,独立地施加到每个片段。背景在这意味着与背景图像的每个片段独立地得出background-repeatno-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

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

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

Results in:

盒装饰中断  |  box-decoration-break

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

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

盒装饰中断  |  box-decoration-break

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

块框片段

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

盒装饰中断  |  box-decoration-break

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

盒装饰中断  |  box-decoration-break

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

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

盒装饰中断  |  box-decoration-break

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

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

规范

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

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单