html - 使用 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>

我觉得我很接近。您可以将第二个背景大小(1px 50px)调整为 1px 75px 以将黑线分开并显示两条虚线。不过，这段代码有两处不太正确。首先，行高实际上是 31px，这令人惊讶，因为我认为我指定了 25px 高的渐变。我确信我可以使这些数字更小以使线条恰好相距 25 像素，但我想知道为什么它比预期的要高。其次，有时 25px 的增量似乎可以工作，直到你向下滚动很远，然后它就会中断。以下是达到预期效果所需的高度:

实线之间的虚线数->对应的背景尺寸

0 -> 1px 25px

1 -> 1px 50px

2 -> 1px 75px

3 -> 1px 99px

4 -> 1px 124px

5 -> 1px 149px

6 -> 1px 174px

7 -> 1px 199px

为什么代码在 100px 处中断，而我必须将它降到 99px？我当然可以将其编码进去，但同样，我真的只是想知道发生了什么。谢谢!

Answer 1

呸!!对不起大家!!此代码实际上按预期工作。我的缩放级别在该选项卡上无意中设置为 110%，并且仅在该选项卡上设置，所以我没有注意到。 (>.<) 这使得它高于 25px 而在 100px 时不起作用。我很尴尬，仅此而已，并为浪费您的时间而道歉。希望你学到了一些关于堆叠线性渐变的知识。再次感谢您的回复。