[分享]css3打印效果

CSS3打印效果是指利用CSS3来控制网页在打印时的样式和展示效果，以达到更好的打印体验和效果。CSS3打印效果主要包括：打印样式、分页控制、打印页面大小和方向等。media print { / 定义...

CSS3打印效果是指利用CSS3来控制网页在打印时的样式和展示效果，以达到更好的打印体验和效果。CSS3打印效果主要包括：打印样式、分页控制、打印页面大小和方向等。

@media print {
   /* 定义打印样式 */
   body {
      color:#000;
      font-size:12px;
   }
   
   /* 分页控制 */
   .page-break{
      page-break-after: always;
   }
   
   /* 打印页面大小和方向 */
   @page {
      size: A4 portrait;
   }
   
   /* 隐藏不必要的元素 */
   .no-print {
      display: none;
   }
} 

上述代码中，@media print表示仅在打印时才生效的样式设置。body中的color和font-size用于设置打印时的文本颜色和字体大小。

.page-break用于设置分页控制，通过page-break-after:always属性设置在当前元素后插入分页符。

@page则用于设置打印页面的大小和方向，如设置为A4纸张大小，默认为横向排列。

.no-print用于隐藏页面中不必要出现的元素，如Logo、导航栏等。

可以通过对CSS3打印效果的设置，来控制网页在打印时的样式和分页控制，并达到更好的打印体验。因此，对于需要打印的页面，我们应该重点考虑CSS3打印效果的优化。