打印时如何为html页面提供页面边框？答案

【问题标题】：How can I give page border to html page while printing?打印时如何为html页面提供页面边框？
【发布时间】：2014-08-27 04:03:22
【问题描述】：

实际上我在 html 页面中有边框。打印时，内容分为两页，第一页的底部边框和第二页的顶部边框不会出现。所以我如何在打印时为每页提供页面边框。我使用了@media print并编写了css里面。是否有任何其他解决方案可以让我在打印页面时在每一页的所有面上都得到边框？

【问题讨论】：

试试：stackoverflow.com/questions/1360869/…
感谢您的回复，您发送的内容与为每个页面添加自定义页眉和页脚有关，我希望在打印时为每个页面添加边框。
@chinnikrishnaReddy 我做了一个简单的布局。让我知道它是否适用于您的情况。 jsbin.com/nilepakibuno/1
您可以添加 2 个元素。 1 表示上边框，1 表示下边框，位置固定。正如上面提供的链接所说，固定元素打印在每一页中。你的问题将得到解决。从屏幕媒体中隐藏这些元素。或者尝试在用于打印媒体的 css 中的 pesudo 元素之前和之后。即 body:before{} 和 body:after{}
很酷，让我把它添加为答案，然后你可以接受它，这样有同样问题的人可以受益。

标签： html css printing print-preview

【解决方案1】：

我在这里制作了一个示例页面，它将为每个页面生成一个边框。打印页面时。请参阅 DEMO。

HTML 代码

<section id='page1'>
     <div class='box'></div>
</section>
<section id='page2'>
     <div class='box'></div>
</section>
<section id='page3'>
     <div class='box'></div>
</section>
<section id='page4'>
     <div class='box'></div>
</section>

CSS 代码

@media screen, print
{
 .box{
  border:1pt solid black;
  border-radius:15px;
  position:absolute;
  top:0;
  width:28.2cm;
  height:19.3cm;
  }
section{position:relative;}
}

【讨论】：