Per page border-image in pure CSS
Question
I am making a small book (~20 pages). 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. 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. I want my result to look like 'clone' but instead I am have 'slice' result.
2 answers
solution1
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). On other hand firefox seems to be working just perfectly. Till this issue is fixed in webkit it's suggested to use firefox.
solution2
0 2015-03-29 15:06:25
我认为如果您在打印窗口中选中此复选框，则可以正确打印页面： 图像链接
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.