如何用CSS线性渐变实现每6条竖线含一条虚线的重复背景？

可以通过单一背景属性实现需求效果，核心思路是将300px设为一个重复周期，在周期内绘制5条垂直实线和1条垂直虚线，具体代码如下：

body {
  background-color: aliceblue;
  background-size: 300px 100%;
  background-image:
    /* 绘制每50px一条的垂直实线，共5条 */
    repeating-linear-gradient(to right,
      gray 1px,
      transparent 1px calc(50px - 1px),
      gray calc(50px - 1px) 50px
    ),
    /* 绘制第6条（300px位置）的垂直虚线 */
    repeating-linear-gradient(to bottom,
      gray 0 5px,
      transparent 5px 10px
    ) 300px 0 / 1px 100%;
  background-repeat: repeat-x;
}

原理说明 #

1. 周期设置：将background-size设为300px 100%，把300px作为一个横向重复的周期，刚好容纳6个50px的单元。
2. 实线绘制：第一个repeating-linear-gradient在每个50px单元内，生成1px宽的灰色实线，剩余49px保持透明，重复5次后覆盖周期内0-250px的区域。
3. 虚线绘制：第二个repeating-linear-gradient通过垂直方向的重复色块（5px灰色+5px透明）模拟虚线效果，利用300px 0将其定位到周期的末尾位置，宽度设为1px、高度100%，形成第6条虚线。
4. 重复平铺：设置background-repeat: repeat-x让整个周期图案横向重复，实现全局的背景效果。

内容的提问来源于stack exchange，提问作者Ivaylo Valchev