我有一个ID为#gradient_div的div,其背景图像设置为线性渐变.仅在某些浏览器窗口宽度下,线性渐变的末尾与div #gradient_div的末尾之间才出现缝隙.当我拉伸和收缩浏览器窗口时,这条白线消失并重新出现.
似乎与边距有关：
>当我将边距设置为margin：0 1％;时,将显示while行
在特定的窗口宽度.
当窗口宽度以1％结尾时,白线出现在1％
例如68-92的范围：468px-492px,568px-592px,
668px-692px等
> 2％：页面宽度在92-_04和42-54范围内结束
> 3％：页面宽度在34-41、67-74和00-08范围内结束
> 30％：页面宽度以5或8结尾
当我仅将背景设置为与渐变相反的颜色(例如背景)时,就没有白线问题.或当我将背景图像设置为图像时；更新当以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>最佳答案
我会稍微增加背景尺寸以避免这种情况：
#gradient_div {
background-image: linear-gradient(to right,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,228));
background-size: calc(100% + 1px) 100%;
height: 100px;
margin: 0 1%;
border: 1px solid black;
}<div id="gradient_div"></div>