如何在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/