Question

我正在制作一本小书（约20页）。但问题是，我希望在网站上显示相同的内容。因此，我决定使用一种格式：HTML + CSS，而不是以两种专用格式（HTML网站，MS Word / Adobe pdf书）制作网站和图书。它使所有事情变得更加容易。我想在每个打印页面上放置边框。就像古老的中世纪书籍一样。要做到这一点，我使用边框图像规则，它工作正常。

     article
    {
        border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 27 round;
        -moz-border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 27 round;
        border-style: solid;
        border-width: 9px;
        box-sizing: border-box;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    <html>
        <body>
            <section>
                <article>
                    <h1>The chapter title</h1>
                    <p>text</p>
                    <p>text</p>
                    <p>...</p>
                </article>
                <article>
                    <h1>The chapter title</h1>
                    <p>text</p>
                    <p>text</p>
                    <p>...</p>
                </article>
                <article>next chapter...</article>
            </section>
        </body>
    </html>

使用网站版时一切正常。尝试打印时，图像边框被破坏。当你在那里看box-decoration-break时有两个例子：'slice'值和'clone'值。我希望我的结果看起来像'克隆'，但我得到'切片'结果。

http://dev.w3.org/csswg/css-break-3/#break-decoration

Answer 1

经过一些修修补补后，我终于解决了这个问题。基于webkit的浏览器（chrome，vivaldi）不支持box-decoration-break。另一方面，firefox似乎工作得非常完美。直到这个问题在webkit中得到修复，建议使用firefox。

Answer 2

我认为如果您在打印窗口中选中此复选框，则可以正确打印页面： The Image Link

纯CSS中的每页边框图像

2 个答案: