乐趣区

关于css: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 中可行的打消突变锯齿的办法。

好了,本文到此结束,心愿本文对你有所帮忙 :)

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

如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。

退出移动版