CSS配方用水平线

Question

我从数据库中提取项目详细信息，并编写一个动态HTML页面，用于打印顶部的项目详细信息。页面的意图是在团队或其他会议中记录有关项目的信息，我希望在项目详细信息之后在空间中显示行。

我可以使用CSS伪标签或CSS函数的哪种组合来用水平线填充页面的空体？

Answer 1

解决方案是在after psuedo标签中使用css函数重复线性渐变。

假设项目详细信息位于名为project_details的类的元素中，则CSS将包含以下内容：

.project_details::after {
  content:          '';
  display:          block;
  width:            100%;
  height:           29cm;
  background:       repeating-linear-gradient(0deg,blue 0px, white 1px,white 30px);
}

content属性是必需的，是一个空字符串，用于强制浏览器使用选择器。如果未指定content属性，则浏览器将忽略“after”选择器。

需要块，显示和宽度才能让浏览器知道要填充的空间的物理大小。在解决方案中，宽度为页面宽度的100％，而高度大致是A4尺寸纸张的高度。

背景是重复的线性渐变，具有单个1像素宽度的蓝线和29px的空白。 0deg表示水平渐变。对于第一个像素（像素0），渐变从蓝色变为白色，从像素1到第30个像素，从白色变为白色，并重复。

这是一些潜在的陷阱：

1. 浏览器的打印渲染可能要求线宽大于1px，以确保打印所有行。
2. 打印对话框可能默认标记为“背景图形”，需要将其切换为开启才能显示线条。