3.4.6 box-decoration-break.md

3.4.6 box-decoration-break

指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现

/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

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

• demo

.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;
  
  // 加上 box-decoration-break 看效果
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


<span class="example">The<br>quick<br>orange fox</span>

参考

-box-decoration-break