纯CSS中的每页边框图像
[英]Per page border-image in pure CSS
问题描述
I am making a small book (~20 pages). 
我正在写一本小书（约20页）。 But the catch is that I want to show same content on a website. 但是要注意的是，我想在网站上显示相同的内容。 So, instead of making website and book in two dedicated formats (website in HTML, book in MS Word/Adobe pdf) I decided to go with one format: HTML + CSS. 因此，我决定采用两种专用格式（HTML格式的网站，MS Word / Adobe pdf格式的书）来制作网站和书籍，我决定采用一种格式：HTML + CSS。 It makes all things far more easier. 它使所有事情变得更加容易。 I want to place a border on each printed page. 我想在每个打印页面上放置一个边框。 Like in old medieval like books. 就像在中世纪的旧书一样。 To do that I am using border-image rule, and it works fine. 为此，我使用了边框图像规则，并且效果很好。
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>
When using website version everything is ok. 使用网站版本时，一切正常。 When trying to print that image border is broken. 尝试打印时，图像边框已损坏。 When you look at box-decoration-break there are two examples: for 'slice' value and for 'clone' value. 当您查看box-decoration-break时 ，有两个示例：“ slice”值和“ clone”值。 I want my result to look like 'clone' but instead I am have 'slice' result. 我希望我的结果看起来像“克隆”，但我却是“切片”结果。
http://dev.w3.org/csswg/css-break-3/#break-decoration http://dev.w3.org/csswg/css-break-3/#break-decoration
2 个解决方案
解决方案1
1 2015-03-30 19:54:55
After some tinkering I finally solved the issue. 经过一番修补，我终于解决了这个问题。 box-decoration-break is not supported by webkit based browsers (chrome, vivaldi). 基于Webkit的浏览器（Chrome，Vivaldi）不支持box-decoration-break。 On other hand firefox seems to be working just perfectly. 另一方面，Firefox似乎工作得很好。 Till this issue is fixed in webkit it's suggested to use firefox. 直到此问题在webkit中得到修复，建议使用firefox。
解决方案2
0 2015-03-29 15:06:25
我认为如果您在打印窗口中选中此复选框，则可以正确打印页面： 图像链接
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.