使用CSS渐变生成网格线

我正尝试在非常高的列上生成交替实线和虚线的网格。值得注意的是，实线需要以编程的方式分开，并且这样做时，它们应该显示更多的虚线。这里是我的代码至今：使用CSS渐变生成网格线

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的增量似乎可以工作，直到你滚动得非常低，然后就会中断。这里需要的高度，以达到预期的效果：

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

0 - > 1px的25像素

1 - > 1px的50像素

2 - > 1px的960x75像素

3 - > 1px的99px

4 - > 1px的124px

5 - > 1px的149px

6 - > 1px的174px

7 - > 1px的199px

为什么在100像素的代码休息，我已经放弃它到99px？我当然可以编码，但我真的只想知道发生了什么。谢谢！

来源

2013-08-26 Mike R

你的jsFiddle产生一个空白的结果 – Vector

我没有得到一个空白的结果，但它实际上崩溃了我的浏览器。 – andi

我认为你可以更有效地使用背景图像（可能是数据图像） – andi

Doh !!对不起大家！！此代码实际上按预期工作。我的缩放级别在该选项卡和该选项卡上无意中设置为110％，所以我没有注意到。（>。<）这使得它高于25px，而不是在100px下工作。我很尴尬，就是这样，为浪费你的时间而道歉。希望你学到了一些关于堆叠线性渐变的知识。再次感谢您的回应。

来源

2013-08-26 20:22:08

使用CSS渐变生成网格线

回答

相关问题