css - 渐变网格

我正在尝试制作一个带有渐变的简单网格。这是我现在的位置

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不能精确地以像素结尾吗？

最佳答案

您希望绘制两条垂直线，以便可以像下面那样优化代码，并避免任何与子像素重划有关的问题。

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;
}