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）表示每条白色垂直线之间的空间，以及＆lt; 5px＆＃39;是那条线的大小。调整这些数字以获得您想要的虚线外观。

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

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

1 个答案: