在特定浏览器宽度下，白线出现在渐变填充 div 的末尾

Question

我有一个 div，ID #gradient_div，background-image 设置为 linear-gradient。我在线性渐变的末端和 div #gradient_div 的末端之间仅在某些浏览器 window 宽度下出现间隙。当我拉伸和收缩浏览器时 window 这条白线消失并重新出现。

好像跟边距有关系:

当我将边距设置为 margin: 0 1%; 时，while 行出现在特定的 window 宽度下。

在 1% 时，只要 window 宽度结束，就会出现白线 68-92 例如：468px-492px , 568px-592px, 668px-692px等

对于其他边距左右百分比，线条出现在这些页面宽度：
- 2% ：页面宽度在 92-_04 和 42-54
- 3% ：页面宽度在 34-41、67-74 和 00-08 范围内结束
- 30%：页面宽度以 5 或 8 结尾

没有没有白线问题当我只是将背景设置为一种颜色而不是渐变时，例如background: blue;或者当我设置background-image 到图像；更新当边距设置为 px 时也不会发生。

欢迎提出解决此问题的建议，但我最感兴趣的是了解为什么会出现这条线。这是什么原因造成的？

    #gradient_div{
    background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86) , rgb(152, 4, 228));
    height: 100px;
    margin: 0 1%;
    border: 1px solid black;
    }

<div id="gradient_div"></div>

Answer 1

我会稍微增加背景的大小来避免这种情况：

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: 101% 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>

你也可以试试只加1px 估计会小于1%

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: calc(100% + 1px) 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>

在特定浏览器宽度下，白线出现在渐变填充 div 的末尾

White line appears at end of gradient filled div at specific browser widths

html

css

background-image

linear-gradients