[分享]css3打印发票纸张

CSS3是一种用于样式设计的语言，而打印页面也是其中一种应用。我们可以使用CSS3来设计发票等纸张的样式。下面是一个示例：media print { body { fontsize: 12px; } ...

CSS3是一种用于样式设计的语言，而打印页面也是其中一种应用。我们可以使用CSS3来设计发票等纸张的样式。下面是一个示例：

@media print {
  body {
    font-size: 12px;
  }
  
  .invoice {
    width: 200mm;
    margin: 0 auto;
    padding: 10mm;
    background-color: #f5f5f5;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-family: "宋体", sans-serif;
  }
  
  .invoice-header {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10mm;
  }
  
  .invoice-header h1 {
    font-size: 24px;
    margin-bottom: 5mm;
  }
  
  .invoice-header p {
    font-size: 14px;
    margin-bottom: 0;
  }
  
  .invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10mm;
  }
  
  .invoice-table th, .invoice-table td {
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
  }
  
  .invoice-table th {
    background-color: #ddd;
  }
  
  .invoice-footer {
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10mm;
  }
} 

代码中我们使用了@media print这个语句，表示这些样式只在打印时起作用。然后我们定义了.invoice类来表示发票的样式，设置了它的宽度、边距、背景色、阴影和字体等样式。接着定义了.invoice-header类和.invoice-table类来分别表示抬头和表格的样式，包括字体大小、对齐方式、边框等。最后定义了.invoice-footer类来表示底部的样式，并使用了font-weight:bold来加粗显示。

使用CSS3来设计打印纸张可以使其更加美观、易读，并且减少打印成本。我们可以使用上述样式来设计发票等纸制文件，以便更好地服务于我们的用户。