Css -webkit渐变，铬色无模糊

在Chrome中，当您从一种颜色更改为另一种颜色时，会产生模糊。我需要这个没有模糊的伤口

在Firefox中：

镀铬：

完整代码：

背景：rgb（216216216）； 背景：莫兹线性梯度（顶部，rgba（255，255，255，1）5%，rgba（216，216，216，1）33%，rgba（255，255，255，1）33%，rgba（255，255，255，1）70%，rgba（216，216，216，1）70%，rgba（255，255，255，1）93%）； 背景：-webkit渐变（线性，左上，左下，颜色停止（5%，rgba（255，255，255，1）），颜色停止（33%，rgba（216，216，216，1）），颜色停止（33%，rgba（255，255，255，1）），颜色停止（70%，rgba（255，255，255，1）），颜色停止（70%，rgba（216，216，216，1）），颜色停止（93%，rgba（255，255，255，1））； 背景：-webkit线性梯度（顶部，rgba（255，255，255，1）5%，rgba（216，216，216，1）33%，rgba（255，255，255，1）33%，rgba（255，255，255，1）70%，rgba（216，216，216，1）70%，rgba（255，255，1）93%）； 背景：-o-线性梯度（顶部，rgba（255，255，255，1）5%，rgba（216，216，216，1）33%，rgba（255，255，255，1）33%，rgba（255，255，255，1）70%，rgba（216，216，216，1）70%，rgba（255，255，255，1）93%）； 背景：-ms线性梯度（顶部，rgba（255，255，255，1）5%，rgba（216，216，216，1）33%，rgba（255，255，255，1）33%，rgba（255，255，255，1）70%，rgba（216，216，216，1）70%，rgba（255，255，255，1）93%）； 背景：线性梯度（到底部，rgba（255，255，255，1）5%，rgba（216，216，216，1）33%，rgba（255，255，255，1）33%，rgba（255，255，255，1）70%，rgba（216，216，216，1）70%，rgba（255，255，255，1）93%）； 过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#d8d8d8'，endColorstr='#ffffff'，GradientType=0）；

---

为不同的浏览器使用浏览器前缀，例如，请完成以下步骤

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 5%,rgba(216,216,216,1) 33%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 70%,rgba(216,216,216,1) 70%,rgba(255,255,255,1) 93%);

---

我也有同样的问题，我刚刚找到了一个解决方法，至少对我有效（Chrome48.0）：

对于方向（第一个参数），使用角度而不是描述性方向，对于Chrome，只需稍微更改角度，如0.01度。它不会被注意到，但会变得清晰

您可以将其放入特定于浏览器的属性中，这样其他浏览器就不会受到影响（因为它会以另一种方式工作-稍微倾斜的方向会使您的渐变稍微模糊）。 请记住-webkit线性渐变有不同的角度默认值：在其他浏览器中，垂直“到底”渐变等于180度角值，而在webkit中为-90度

因此，对于垂直渐变，添加：

-webkit-linear-gradient(-89.99deg, colorstops....)

---

…并将其添加到线性渐变之后，以覆盖它，因为Chrome同时读取声明（标准和供应商前缀）

昨天我偶然发现了一个类似的问题，决定发布我的解决方案。 我正在使用SCS，但我真的认为这不重要。 这个想法是使用两个地图：一个有颜色，一个有停止。 然后在地图上迭代并生成多个背景

TL；博士，你可以现场观看演示

我之所以使用mixin是因为我喜欢重用东西：

/**
 * Create a single background image using CSS gradients
 * without blur between color stops.
 * This can be achieved with a single linear-gradient,
 * but in only Firefox will render it properly.
 * All other browsers will blur the edges of the stops.
 *
 * @param $colors - Map of colors
 * @param $stops - Map of color stops
 * @param $direction - One of 'horizontal' or 'vertical'

 * @return - Multiple background declaration consisting of
 * many linear gradients
 *
 * It's important that the keys of both maps are the same.
 */
@mixin rainbow($colors, $stops, $direction: 'horizontal') {
    $dir: to right;
    $background: '';

    @if $direction == 'vertical' {
        $dir: to bottom;
    }

    @each $name, $color in $colors {
        $list: map-keys($colors);
        $slash: unquote('/');
        $index: index($list, $name);
        $comma: unquote(', ');

        @if $index == length($list) {
            $comma: unquote('');
        }

        $offset: map-get($stops, $name);
        $gradient: linear-gradient($dir, $color 0%, $color 100%);
        $size: $offset 100%;

        @if $direction == 'vertical' {
            $size: 100% $offset;
        }

        // prettier-ignore
        $background: $background + $gradient no-repeat 0% 0% $slash $size + $comma;
    }

    $background: unquote($background);
    background: $background;
}

然后我创建了两个贴图-一个带有颜色，一个带有颜色停止。 值得一提的是，地图的键应该是相同的：

// DEMO
body {
    background: black;
}

div {
    $blue: blue;
    $green: green;
    $orange: orange;
    $purple: purple;
    $red: red;

    $colors: (
        'blue': $blue,
        'green': $green,
        'orange': $orange,
        'purple': $purple,
        'red': $red
    );

    $stops: (
        'blue': 30%,
        'green': 45%,
        'orange': 62%,
        'purple': 87%,
        'red': 100%
    );

    height: 20px;

    @include rainbow($colors, $stops);
}

现在让我们看看它将如何适用于您的用例。 我使用的是虚拟跨度元素：

span {
    $white: #fff;
    $gray: #d8d8d8;

    $colors: (
        '1': $white,
        '2': $gray,
        '3': $white,
        '5': $gray
    );

    $stops: (
        '1': 5%,
        '2': 33%,
        '3': 70%,
        '5': 100%
    );

    height: 200px;
    display: block;

    @include rainbow($colors, $stops, 'vertical');
}

---

请澄清你的问题。你的意思是当你从一种颜色切换到另一种颜色时，你会得到一个模糊的过渡，你需要一个坚实的过渡吗？你会意识到你的firefox图像只是一种颜色吗？那里没有渐变，唯一的Reion chrome有渐变是因为你只使用了webkit prefixright。。。当我从一种颜色切换到另一种颜色时，只有在Chrome中才会产生模糊效果。问题只存在于Chrome中，另一种浏览器对我不起作用，但这是个好主意。我相信这是一个持续存在的chrome错误——我填写了一份错误报告。