css - 渐变网格

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