使用渐变时的丑陋边缘答案

【问题标题】：Ugly edge when using gradient使用渐变时的丑陋边缘
【发布时间】：2016-04-07 13:23:17
【问题描述】：

我正在尝试创建一个 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%）。这在很多情况下都有帮助。在其他一些情况下，添加 backface-visibility: hidden 会有所帮助。
background image, linear gradient jagged edged result needs to be smooth edged的可能重复
@harry 这非常感谢！小差距起到了作用。我还尝试将其设置为 600x600 像素，然后硬边消失了。

标签： html css

【解决方案1】：

在两个颜色停止点（如 49.5% 和 50.5%）之间设置一个小间隙就可以了。

【讨论】：

【解决方案2】：

你可以在这里尝试这种风格：https://jsfiddle.net/dnn02d64/4/

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

【讨论】：