今天读了大漠老师的<<初探box-decoration-break>>,收获不少，特此记录box-decoration-break主要用来指定background、padding、border、border-image、box-shadow和clip在行内元素中如何使用
box-decoration-break有两个值：
clone：每个盒子的片段都有独立的border和padding。如果取值为clone，除了border和padding之外还有border-radius、border-image、box-shadow和background都会独立运用于元素的每个片段slice(默认值)：取值为slice时，border和padding不会运用于元素被打断的片段中（除首行和末行），同时border-radius也只会运用于元素的四个顶角，对于打断片段之处并不会有任何的效果。而border-image和background会被运用于整个元素（全体是元素盒子是完整的）
代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<title>box-decoration-break</title>
</head>
<style type="text/css">
body{
margin:0;
padding:1em;
width: 50vw;
height:100vw;
display: flex;
}
.box{
margin:0 1em;
}
h2{
text-align: center;
}
span{
font-size:1.2em;
border:1px solid red;
line-height: 2;
background: lime;
hyphens: auto;
padding:5px 10px;
border-radius: 5px;
}
span.clone{
border: 2px solid green;
background-color: orange;
color: #fff;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
</style>
<body>
<div class="box">
<h2>slice</h2>
<div class="demo">
<span>到这里，Markdown 的基本语法在日常的使用中基本就没什么大问题了，只要多加练习，配合好用的工具，写起东西来肯定会行云流水。更多的语法规则，其实 Mou 的 Help 文档栗子很好，当你第一次使用 Mou 时，就会显示该文档。可以用来对用的查找和学习。</span>
</div>
</div>
<div class="box">
<h2>clone</h2>
<div class="demo">
<span class="clone">熟悉 HTML 的同学肯定知道有序列表与无序列表的区别，在 Markdown 下，列表的显示只需要在文字前加上 - 或 * 即可变为无序列表，有序列表则直接在文字前加1. 2. 3. 符号要和文字之间加上一个字符的空格。</span>
</div>
</div>
</body>
</html>
效果图：
使用box-decoration-break来处理元素片段样式时，该元素必须是
inline元素（或者display:inline的其它元素），而且该元素不能使用取值为其它值的display（比如block、inline-block、flex等），也不能运用于float和position（取值为absolute和fixed）。