1. 首頁 > 生活百科 > >

CSS 漸變鋸齒消失術( 二 )

生活百科

通過偽元素疊加的意思是，在產生鋸齒的地方，實現一個平滑過渡進行覆蓋：

CSS 漸變鋸齒消失術

文章插圖
效果如下：
CSS 漸變鋸齒消失術

文章插圖
CodePen Demo -- 消除 Gradient 鋸齒
劃重點！此方法適用于線性漸變、徑向漸變、角向漸變，是最為簡單的消除 CSS 鋸齒的方式 。
更為高階的鋸齒消除法當然，也還有其他更為高階的鋸齒消除法 。
在仿生獅子的這篇文章中 -- CSS 幻術 | 抗鋸齒，還介紹了另外一種有意思的消除鋸齒的方式 。以下內容，部分摘錄至該文章 。
我們可以建立一種邊緣鋸齒邊緣->重建鋸齒邊緣的鋸齒消除方法 。
我們需要做的，就是在鋸齒處，疊加上另外一層內容 ， 讓鋸齒感不那么強烈 。稱為像素偏移抗鋸齒（Pixel-Offset Anti-Aliasing，POAA） 。
在 Implementing FXAA 這篇博客中，解釋了 FXAA 具體是如何運作的 。對于一個已經被找到的圖形邊緣，經過 FXAA 處理后會變成這樣 ， 見下兩幅圖：
CSS 漸變鋸齒消失術

文章插圖

CSS 漸變鋸齒消失術

文章插圖
【CSS 漸變鋸齒消失術】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    );}
CSS 漸變鋸齒消失術

文章插圖
邊緣信息如下：
CSS 漸變鋸齒消失術

文章插圖
我們要做的，就是在它的邊緣處，利用漸變再生成一段漸變 ， 通過準確疊加 ， 消除漸變！原理圖如下：
CSS 漸變鋸齒消失術

文章插圖
原理可行 ， 但是實操起來非常之復雜，計算量會比較大 。感興趣的可以拿這段代碼嘗試一下：
.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            );        }    }}

推薦閱讀