带渐变的网格

Question

我正在尝试制作一个简单的渐变网格。这就是我目前所处的位置

body {
background: #f3f3f3;
background: linear-gradient(90deg, #f3f3f3 10vw, #dbdbdb calc(10vw + 1px), #f3f3f3 calc(10vw + 2px), #f3f3f3 calc(90vw - 2px), #dbdbdb calc(90vw - 1px), #f3f3f3 90vw);
}

问题是，它仅在屏幕尺寸非常小时有效。我真的不明白为什么。是因为特定vw没有精确地出现在像素上吗？

Answer 1

您想绘制两条垂直线，以便可以像下面这样优化代码并避免与子像素排列相关的任何问题。

body {
background:
/* color                         position        / width height*/
linear-gradient(#dbdbdb,#dbdbdb) left  10% top 0 / 1px   100%,   /*1st line*/
linear-gradient(#dbdbdb,#dbdbdb) right 10% top 0 / 1px   100%,   /*2nd line*/
#f3f3f3; /* background color */
background-repeat:no-repeat;

margin:0;
height:100vh;
}

或者像下面一样，如果大小保持不变：

body {
background:
linear-gradient(#dbdbdb,#dbdbdb) left  10% top 0, 
linear-gradient(#dbdbdb,#dbdbdb) right 10% top 0,
#f3f3f3;
background-size:1px 100%;
background-repeat:no-repeat;

margin:0;
height:100vh;
}