4

我正在尝试在一个非常高的列上生成一个带有交替实线和虚线的网格。问题是实线需要以编程方式分开更远，这样做时，它们应该显示更多的虚线。这是我到目前为止的代码：

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 -> 1 像素 25 像素

1 -> 1 像素 50 像素

2 -> 1 像素 75 像素

3 -> 1 像素 99 像素

4 -> 1 像素 124 像素

5 -> 1 像素 149 像素

6 -> 1 像素 174 像素

7 -> 1 像素 199 像素

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

4

1 回答 1

0

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

于 2013-08-26T20:22:08.967 回答