Html 使用渐变时的丑陋边缘

我正在尝试创建一个2色背景，将其用作文本容器的背景。为了得到两种不同的颜色，我使用了渐变。现在让我给你看看它是什么样子

如果你仔细看，你可以看到中间的线看起来有点像，我不知道该怎么称呼它，让我们说它看起来不光滑。 以下是我的css：

.btn {
    background:#8a8a8a;
    background: linear-gradient(to right bottom, #000000 50%, #8a8a8a 50%);

    display:inline-block;
    padding:0.75em 2.0em;
    font-size:18px;
    text-align:center;
    margin:0.25em 0;
    color:#ffffff;
    font-weight:normal;
    font-family:sans-serif;
}

---

在两个颜色停止点之间留出一个小的间隔（比如49.5%和50.5%）就成功了

您可以在这里尝试这种风格：

---

这是一个已知的项目。你的代码没有问题。这就是它的行为方式。在两个颜色停止点之间留出一个小间隙（如49.5%和50.5%）。这在很多情况下都有帮助。在其他一些情况下，添加

背面可见性：hidden

会有帮助。可能重复@harry，这很有帮助，非常感谢！这个小缺口起了作用。我还试着把它做成600x600像素，然后硬边也消失了。

.btn {
    background:#8a8a8a;
    background: linear-gradient(to right bottom, #000000 49.99%, #8a8a8a 50.99%);

    display:inline-block;
    padding:0.75em 2.0em;
    font-size:18px;
    text-align:center;
    margin:0.25em 0;
    color:#ffffff;
    font-weight:normal;
    font-family:sans-serif;
}