CSS 渐变锯齿消失术

在 CSS 中，突变（Gradient）可谓是最为强大的一个特点之一。

可是，经常有同学在运用突变的过程中会遇到突变图形发生的锯齿问题。

何为突变锯齿？

那么，什么是突变图形发生的锯齿呢？

简略的一个 DEMO：

<div></div>

div {
    width: 500px;
    height: 100px;
    background: linear-gradient(37deg), #000 50%, #f00 50%, #f00 0);
}

作用如下：

其实，锯齿感已经十分显着了，咱们再扩大了看，其内部其实是这样的：

又或许是这样：

有意思的是，锯齿现象在 DPR 为 1 的屏幕下特别显着，而在一些高清屏（dpr > 1）的屏幕下，感触不会那么显着。

DPR（Device Pixel Ratio）为设备像素比，DPR = 物理像素 / 设备独立像素，设备像素比描绘的是未缩放状况下，物理像素和设备独立像素的初始比例关系。

那么为啥会发生锯齿感呢？

传统网页的呈现是基于像素单位的，关于这种一种颜色直接过渡别的一种颜色状况的图片，简略导致可视质量下降（信息失真）。因而关于一般的突变元素，像是上述写法，发生了锯齿，这是十分常见的在运用突变过程中的一个扎手问题。

简略的解决办法

解决失真的问题有许多。这儿最简略的办法便是不要直接过渡，保存一个极小的突变过渡空间。

上述的代码，咱们能够简略改造一下：

div {
    width: 500px;
    height: 100px;
  - background: linear-gradient(37deg), #000 50%, #f00 50%, #f00);
  + background: linear-gradient(37deg), #000 49.5%, #f00 50.5%, #f00);
}

仔细看其中的改动，咱们从 50% –> 50% 的直接过渡，改动成预留了 1% 的突变过渡空间，作用如下：

能够看到，作用立马有了大幅提高！

当然，假如不想修正原代码，也能够经过叠加一层伪元素完成，这儿给出 3 种办法的比照图：

<div></div>
<div class="gradient"></div>
<div class="pesudo"></div>

:root {
    --deg: 37deg;
    --c1: #000;
    --c2: #f00;
    --line-width: 0.5px;
}
div {
    margin: auto;
    width: 500px;
    height: 100px;
    background: linear-gradient(
        var(--deg),
        var(--c1) 50%,
        var(--c2) 50%,
        var(--c2) 0
    );
}
// 办法一：
.gradient {
    background: linear-gradient(
        var(--deg),
        var(--c1),
        var(--c1) calc(50% - var(--line-width)),
        var(--c2) calc(50% + var(--line-width)),
        var(--c2) 0
    );
}
// 办法二：
.pesudo {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            var(--deg),
            transparent,
            transparent calc(50% - var(--line-width)),
            var(--c1) calc(50% - var(--line-width)),
            var(--c2) calc(50% + var(--line-width)),
            transparent calc(50% + var(--line-width)),
            transparent
        );
    }
}

经过伪元素叠加的意思是，在发生锯齿的地方，完成一个滑润过渡进行掩盖：

作用如下：

CodePen Demo — 消除 Gradient 锯齿

划重点！此办法适用于线性突变、径向突变、角向突变，是最为简略的消除 CSS 锯齿的办法。

更为高阶的锯齿消除法

当然，也还有其他更为高阶的锯齿消除法。

在仿生狮子的这篇文章中 — CSS 幻术 | 抗锯齿，还介绍了别的一种有意思的消除锯齿的办法。以下内容，部分摘录至该文章。

咱们能够树立一种边际锯齿边际->重建锯齿边际的锯齿消除办法。

咱们需求做的，便是在锯齿处，叠加上别的一层内容，让锯齿感不那么强烈。称为像素偏移抗锯齿（Pixel-Offset Anti-Aliasing，POAA）。

在 Implementing FXAA 这篇博客中，解说了 FXAA 详细是如何运作的。关于一个已经被找到的图形边际，经过 FXAA 处理后会变成这样，见下两幅图：

FXAA（Fast Approximate Anti-Aliasing），快速近似抗锯齿，它找到画面中所有图形的边际并进行滑润处理。

咱们能够容易找到找到突变的边际地方，便是那些突变的颜色改动的地方。有了边际信息后，接着就要重建边际。重建边际也许能够再拆分，分为以下几个步骤：

• 需求经过某种办法得到透明度的点
• 这些点需求能够组成线段
• 线段完全吻合咱们的 Gradient
• 使线段掩盖在 Gradient 的上一层以使用咱们的修正

这便是大体思路，咱们并没有参与浏览器的烘托，而是经过像 FXAA 一样的后处理的办法。在已烘托的图画上做文章。

比如说，咱们有这样一张图：

.circle-con {
    $c1: #cd3f4f;
    $c2: #e6a964;
    position: relative;
    height: 300px;
    background-image: repeating-radial-gradient(
        circle at 0% 50%, 
        $c1 0, 
        $c2 50px
    );
}

边际信息如下：

咱们要做的，便是在它的边际处，利用突变再生成一段突变，经过准确叠加，消除突变！原理图如下：

原理可行，可是实操起来十分之复杂，核算量会比较大。感兴趣的能够拿这段代码尝试一下：

.repeat-con {
    --c1: #cd3f4f;
    --c2: #e6a964;
    --c3: #5996cc;
    position: relative;
    height: 300px;
    background-image: repeating-linear-gradient(
        var(--deg),
        var(--c1),
        var(--c1) 10px,
        var(--c2) 10px,
        var(--c2) 40px,
        var(--c1) 40px,
        var(--c1) 50px,
        var(--c3) 50px,
        var(--c3) 80px
    );
    &.antialiasing {
        &:after {
            --offsetX: 0.4px;
            --offsetY: -0.1px;
            --dark-alpha: 0.3;
            --light-alpha: 0.6;
            --line-width: 0.6px;
            content: '';
            position: absolute;
            top: var(--offsetY);
            left: var(--offsetX);
            width: 100%;
            height: 100%;
            opacity: 0.5;
            background-image: repeating-linear-gradient(
                var(--deg),
                var(--c3),
                transparent calc(0px + var(--line-width)),
                transparent calc(10px - var(--line-width)),
                var(--c2) 10px,
                var(--c1) 10px,
                transparent calc(10px + var(--line-width)),
                transparent calc(40px - var(--line-width)),
                var(--c1) 40px,
                var(--c2) 40px,
                transparent calc(40px + var(--line-width)),
                transparent calc(50px - var(--line-width)),
                var(--c3) 50px,
                var(--c1) 50px,
                transparent calc(50px + var(--line-width)),
                transparent calc(80px - var(--line-width)),
                var(--c1) 80px
            );
        }
    }
}

最终

简略总结一下，本文介绍了几种 CSS 中可行的消除突变锯齿的办法。

好了，本文到此结束，希望本文对你有所协助 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的大众号 — iCSS前端趣闻

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ，继续更新，欢迎点个 star 订阅收藏。

假如还有什么疑问或许主张，能够多多交流，原创文章，文笔有限，孤陋寡闻，文中若有不正之处，万望奉告。