国产三级久久久精品麻豆三级,亚洲精品欧美综合四区

在 CSS 中，漸層（Gradient）可謂是最為強(qiáng)大的一個(gè)屬性之一。

但是，常有同學(xué)在使用漸層的過程中會(huì)遇到漸層圖形所產(chǎn)生的鋸齒問題。【推薦學(xué)習(xí)：css影片教學(xué)】

何為漸層鋸齒？

那麼，什麼是漸層圖形產(chǎn)生的鋸齒呢？

簡單的一個(gè)DEMO：

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

效果如下：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

#其實(shí)，鋸齒感已經(jīng)非常明顯了，我們再放大了看，其內(nèi)部其實(shí)是這樣的：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

又或者是這樣：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

有趣的是，鋸齒現(xiàn)像在DPR 為1 的螢?zāi)幌绿貏e明顯，而在一些高清螢?zāi)唬╠pr > 1）的螢?zāi)幌?，感受不?huì)那麼明顯。

DPR（Device Pixel Ratio）為設(shè)備像素比，DPR = 物理像素 / 設(shè)備獨(dú)立像素，設(shè)備像素比描述的是未縮放狀態(tài)下，物理像素和設(shè)備獨(dú)立像素的初始比例關(guān)係。

那麼為啥會(huì)產(chǎn)生鋸齒感呢？

傳統(tǒng)網(wǎng)頁的呈現(xiàn)是基於像素單位的，對於這種一種顏色直接過渡另外一種顏色狀態(tài)的圖片，容易導(dǎo)致可視質(zhì)量下降（信息失真）。因而對於普通的漸變元素，像是上述寫法，產(chǎn)生了鋸齒，這是非常常見的在使用漸變過程中的一個(gè)棘手問題。

簡單的解決方法

解決失真的問題很多。這裡最簡單的方式就是不要直接過渡，保留一個(gè)極小的漸層過渡空間。

上述的程式碼，我們可以簡單改造一下：

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

仔細(xì)看其中的變化，我們從50% --> 50% 的直接過渡，變化成預(yù)留了1%的漸變過渡空間，效果如下：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

可以看到，效果立刻有了大幅提升！

當(dāng)然，如果不想修改原程式碼，也可以透過疊加一層偽元素實(shí)現(xiàn)，這裡給出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
        );
    }
}

透過偽元素疊加的意思是，在產(chǎn)生鋸齒的地方，實(shí)作一個(gè)平滑過渡進(jìn)行覆寫：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

#效果如下：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

CodePen Demo -- 消除Gradient 鋸齒

劃重點(diǎn)！ 此方法適用於線性漸變、徑向漸層、角向漸層，是最簡單的消除 CSS 鋸齒的方式。

更高階的鋸齒消除法

當(dāng)然，也還有其他更高階的鋸齒消除法。

在仿生獅子的這篇文章中 -- CSS 幻術(shù) | 抗鋸齒，也介紹了另一個(gè)有趣的消除鋸齒的方式。以下內(nèi)容，部分摘錄至該文章。

我們可以建立一種邊緣鋸齒邊緣->重建鋸齒邊緣的鋸齒消除方法。

我們需要做的，就是在鋸齒處，疊加上另外一層內(nèi)容，讓鋸齒感不那麼強(qiáng)烈。稱為像素偏移抗鋸齒（Pixel-Offset Anti-Aliasing，POAA）。

在Implementing FXAA這篇博客中，解釋了 FXAA 具體是如何運(yùn)作的。對于一個(gè)已經(jīng)被找到的圖形邊緣，經(jīng)過 FXAA 處理后會(huì)變成這樣，見下兩幅圖：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

FXAA（Fast Approximate Anti-Aliasing），快速近似抗鋸齒，它找到畫面中所有圖形的邊緣并進(jìn)行平滑處理。

我們可以輕易找到找到漸變的邊緣地方，就是那些漸變的顏色改變的地方。有了邊緣信息后，接著就要重建邊緣。重建邊緣也許可以再拆分，分為以下幾個(gè)步驟：

需要通過某種方法得到透明度的點(diǎn)
這些點(diǎn)需要能夠組成線段
線段完全吻合我們的 Gradient
使線段覆蓋在 Gradient 的上一層以應(yīng)用我們的修改

這就是大體思路，我們并沒有參與瀏覽器的渲染，而是通過像 FXAA 一樣的后處理的方法。在已渲染的圖像上做文章。

比如說，我們有這樣一張圖：

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

實(shí)例詳解CSS漸變鋸齒問題如何解決！

邊緣信息如下：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

我們要做的，就是在它的邊緣處，利用漸變再生成一段漸變，通過準(zhǔn)確疊加，消除漸變！原理圖如下：

實(shí)例詳解CSS漸變鋸齒問題如何解決！

原理可行，但是實(shí)操起來非常之復(fù)雜，計(jì)算量會(huì)比較大。感興趣的可以拿這段代碼嘗試一下：

.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: &#39;&#39;;
            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
            );
        }
    }
}