使用渐变时，不同分辨率下元素中间出现垂直黑条

Question

使用渐变时，不同分辨率下的元素中间会出现垂直黑条。它出现在“webkit”浏览器中（Firefox 是一个例外）。

我的HTML代码：

<div class="button">Button</div>

CSS代码：

.button {
  background: #007FEE;
  background: linear-gradient(
135deg, transparent 10px, #007FEE 0) top left, linear-gradient(
225deg, transparent 10px, #007FEE 0) top right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
  color: #000;
  height: 40px;
}

这是第二个 background 属性是它出现的原因（线性渐变）。

提前感谢您的回答！对不起我的英语。

Answer 1

我想是因为background-size: 50% 100%;

只需将值更改为大于 50%即可。

尝试：background-size: 51% 100%;

使用渐变时，不同分辨率下元素中间出现垂直黑条

A vertical black bar appears in the middle of the element at different resolutions when using a gradient

html

css

gradient

linear-gradients