box-decoration-break

定义

box-decoration-break属性是用来控制行内元素。

注意：可以控制行内元素包括：padding、background、border-image、border、margin和clip属性在行内元素多行情形下的渲染形式。

语法

box-decoration-break:slice|clone;

属性值

值	描述
clone	每个盒子的片段都有独立的border和padding。如果取值为clone，除了border和padding之外还有border-radius、border-image、box-shadow和background都会独立运用于元素的每个片段。
slice	取值为slice时，border和padding不会运用于元素被打断的片段中（除首行和末行），同时border-radius也只会运用于元素的四个顶角，对于打断片段之处并不会有任何的效果。而border-image和background会被运用于整个元素（全体是元素盒子是完整的）。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        body {
            box-sizing: border-box;
            padding: 1em;
            width: 100vw;
            height: 100vh;
            display: flex;
        }
        .box {
            margin: 0 1em;}

        h2 {
            text-align: center;
        }


        span {
            border: 1px solid red;
            font-size: 1.2em;
            padding: 10px;
            line-height: 2.5;
            hyphens: auto;
            background: orange;
            color: #fff;}

        .clone {
            border: 2px solid green;
            background-color: #f36;
            color: #fff;
            box-decoration-break: clone;
        }

    </style>
</head>
<body>
    <div class="box">
        <h2>slice</h2>
        <div class="demo">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequuntur debitis, dolore dolorum explicabo facere facilis ipsa ipsum magnam maxime neque omnis placeat rem repellat reprehenderit sed sunt ullam voluptatum.</span>
        </div>
    </div>
    <div class="box">
        <h2>clone</h2>
        <div class="demo">
            <span class="clone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias blanditiis cumque delectus deserunt exercitationem hic id in modi molestiae nostrum officia, officiis perferendis perspiciatis rerum sint soluta sunt, unde voluptas.</span>
        </div>
    </div>
</body>
</html>

slice

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequuntur debitis, dolore dolorum explicabo facere facilis ipsa ipsum magnam maxime neque omnis placeat rem repellat reprehenderit sed sunt ullam voluptatum.

clone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias blanditiis cumque delectus deserunt exercitationem hic id in modi molestiae nostrum officia, officiis perferendis perspiciatis rerum sint soluta sunt, unde voluptas.

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari	Chrome	FireFox	IE
6.0	3.0	4.0	9.0