使用CSS渐变生成网格线

Question

我将尝试生成一个带有交替实线和虚线的网格，该网格覆盖了一个非常高的列。问题在于实线需要通过编程方式变得更加分散，并且在这样做时，它们应该显示更多的虚线。以下是我目前拥有的代码：

JSFiddle: http://jsfiddle.net/etzVJ/ CSS:

.test {
    width: 100%;
    height: 2000px;
    background: 
        linear-gradient(white 24px, transparent 24px) 0px -24px,
        linear-gradient(black 24px, transparent 24px),
        linear-gradient(90deg, white 1px, red 1px, red 2px, white 2px);
    background-size: 1px 25px, 1px 50px, 3px 1px;
}

HTML：

<div class="test">
    &nbsp;
</div>

我认为我已经很接近了。您可以调整第二个background-size（1px 50px）至1px 75px，以将黑线分开并显示两条虚线。但是，这段代码有两个问题。首先，行高实际上是31px，这让我感到惊讶，因为我认为我指定了25px的渐变。我确定我可以缩小这些数字以使线条正好相距25px，但我想知道为什么它比预期的要高。其次，有时候25px的增量似乎有效，直到您滚动得非常远，然后它就会崩溃。以下是实现所需效果所需的高度：

实线之间的虚线数 -> 相应的背景大小

0 -> 1px 25px

1 -> 1px 50px

2 -> 1px 75px

3 -> 1px 99px

4 -> 1px 124px

5 -> 1px 149px

6 -> 1px 174px

7 -> 1像素 199像素

为什么代码在100像素处会出错，而我必须将其降至99像素？我当然可以编写代码解决这个问题，但我真的只想知道发生了什么。谢谢！

- Mike R

---

你的 jsFiddle 生成了一个空白结果。 - Kevin Lynch

我没有得到一个空的结果，但它实际上会导致我的浏览器崩溃。 - andi

我认为你可以使用背景图像（可能是data-images）更高效地完成这个任务。 - andi

顺便问一下，你是怎么看到它在100像素处断开的？我没有发现任何问题。 - andi

我需要支持的唯一浏览器是Chrome，它不会减慢速度。在1px 100px处，两条实线之间有八条虚线。你看到的不是同样的东西吗？ - Mike R

我看到了正确的行高，是25。但我没有看到31像素的行高。 - vals

Answer 1

糟糕！对不起，各位！这段代码实际上是按预期工作的。我的缩放级别在那个选项卡上不小心设置为110％，所以我没有注意到。(>.<) 这使它比25px高，而不是100px。很抱歉浪费了你们的时间，这就是全部原因。希望您学到了有关堆叠线性渐变的知识。再次感谢您的回复。

- Mike R