渐变网格

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

渐变网格

Grid with gradient

css

linear-gradients