如何在css中创建垂直重复的水平虚线

Question

我使用以下 css 创建了垂直重复的水平线（实线）

.solid-lines {
  background-image: linear-gradient(#ccc 1px, transparent 1px);
  background-size: 100% 30px;
}

JS Bin

现在我需要相同的背景，但用虚线代替实线。是否可以仅使用 css。

Answer 1

获得此效果的方法之一是堆叠渐变。您将有一个渐变代表彩色水平线，然后添加白色垂直线作为第二个渐变。 （可以是白色，也可以是您的背景颜色）。

.solid-lines {
  padding-left:5px;
  background-image:linear-gradient(to right, #fff 5px, transparent 1px), linear-gradient(#ccc 1px, transparent 1px);
  background-size: 20px 30px;
}

添加的填充用于第一行的偏移量。背景大小（20px）代表每条白色垂直线之间的空间，“5px”是该线的大小。调整这些数字以获得您想要的虚线外观。

http://jsbin.com/weyozutawiva/1/