Question

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

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高的渐变。我确信我可以让这些数字更小，以使线条相距25px，但我想知道为什么它比预期的要高。其次，有时25px的增量似乎有效，直到你向下滚动很远，然后它就会中断。以下是达到预期效果所需的高度：

实线之间的虚线数 - ＆gt;对应的背景大小

0 - ＆gt; 1px 25px

1 - ＆gt; 1px 50px

2 - ＆gt; 1px 75px

3 - ＆gt; 1px 99px

4 - ＆gt; 1px 124px

5 - ＆gt; 1px 149px

6 - ＆gt; 1px 174px

7 - ＆gt; 1px 199px

为什么代码中断为100px，我必须将其降至99px？我当然可以编写代码，但同样，我真的只想知道发生了什么。谢谢！

Answer 1

卫生署!!对不起大家！！此代码实际上按预期工作。我的缩放级别在该选项卡和该选项卡上无意中设置为110％，因此我没有注意到。（＆gt;。＆lt;）那使它高于25px而不是100px工作。我很尴尬，就是浪费你的时间而道歉。希望您学到了有关堆叠线性渐变的知识。再次感谢您的回复。

使用CSS渐变生成网格线

1 个答案: