站長(zhǎng)資訊網(wǎng)本篇文章給大家介紹一下如何解決在使用漸變圖形產(chǎn)生的鋸齒問(wèn)題，所謂CSS漸變鋸齒消失術(shù)，你會(huì)了就能搞定，下面就帶大家一起來(lái)看看怎么實(shí)現(xiàn)吧~希望對(duì)大家有所幫助！
CSS 漸變鋸齒消失術(shù)
在 CSS 中，漸變（Gradient）可謂是最為強(qiáng)大的一個(gè)屬性之一。
但是，經(jīng)常有同學(xué)在使用漸變的過(guò)程中會(huì)遇到漸變圖形產(chǎn)生的鋸齒問(wèn)題?！就扑]學(xué)習(xí)：css視頻教程】
何為漸變鋸齒？
那么，什么是漸變圖形產(chǎn)生的鋸齒呢？
簡(jiǎn)單的一個(gè) DEMO：
<div></div> div { width: 500px; height: 100px; background: linear-gradient(37deg), #000 50%, #f00 50%, #f00 0); }
效果如下：
其實(shí)，鋸齒感已經(jīng)非常明顯了，我們?cè)俜糯罅丝矗鋬?nèi)部其實(shí)是這樣的：
又或者是這樣：
有意思的是，鋸齒現(xiàn)象在 DPR 為 1 的屏幕下特別明顯，而在一些高清屏（dpr > 1）的屏幕下，感受不會(huì)那么明顯。
DPR（Device Pixel Ratio）為設(shè)備像素比，DPR = 物理像素 / 設(shè)備獨(dú)立像素，設(shè)備像素比描述的是未縮放狀態(tài)下，物理像素和設(shè)備獨(dú)立像素的初始比例關(guān)系。
那么為啥會(huì)產(chǎn)生鋸齒感呢？
傳統(tǒng)網(wǎng)頁(yè)的呈現(xiàn)是基于像素單位的，對(duì)于這種一種顏色直接過(guò)渡另外一種顏色狀態(tài)的圖片，容易導(dǎo)致可視質(zhì)量下降（信息失真）。因而對(duì)于普通的漸變?cè)?，像是上述?xiě)法，產(chǎn)生了鋸齒，這是非常常見(jiàn)的在使用漸變過(guò)程中的一個(gè)棘手問(wèn)題。
簡(jiǎn)單的解決辦法
解決失真的問(wèn)題有很多。這里最簡(jiǎn)單的方式就是不要直接過(guò)渡，保留一個(gè)極小的漸變過(guò)渡空間。
上述的代碼，我們可以簡(jiǎn)單改造一下：
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% 的直接過(guò)渡，變化成預(yù)留了 1% 的漸變過(guò)渡空間，效果如下：
可以看到，效果立馬有了大幅提升！
當(dāng)然，如果不想修改原代碼，也可以通過(guò)疊加一層偽元素實(shí)現(xiàn)，這里給出 3 種方式的對(duì)比圖：
<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 ); } }
通過(guò)偽元素疊加的意思是，在產(chǎn)生鋸齒的地方，實(shí)現(xiàn)一個(gè)平滑過(guò)渡進(jìn)行覆蓋：
效果如下：
CodePen Demo — 消除 Gradient 鋸齒
劃重點(diǎn)！此方法適用于線性漸變、徑向漸變、角向漸變，是最為簡(jiǎn)單的消除 CSS 鋸齒的方式。
更為高階的鋸齒消除法
當(dāng)然，也還有其他更為高階的鋸齒消除法。
在仿生獅子的這篇文章中 — CSS 幻術(shù) | 抗鋸齒，還介紹了另外一種有意思的消除鋸齒的方式。以下內(nèi)容，部分摘錄至該文章。
我們可以建立一種邊緣鋸齒邊緣->重建鋸齒邊緣的鋸齒消除方法。
我們需要做的，就是在鋸齒處，疊加上另外一層內(nèi)容，讓鋸齒感不那么強(qiáng)烈。稱(chēng)為像素偏移抗鋸齒（Pixel-Offset Anti-Aliasing，POAA）。
在Implementing FXAA這篇博客中，解釋了 FXAA 具體是如何運(yùn)作的。對(duì)于一個(gè)已經(jīng)被找到的圖形邊緣，經(jīng)過(guò) FXAA 處理后會(huì)變成這樣，見(jiàn)下兩幅圖：
FXAA（Fast Approximate Anti-Aliasing），快速近似抗鋸齒，它找到畫(huà)面中所有圖形的邊緣并進(jìn)行平滑處理。
我們可以輕易找到找到漸變的邊緣地方，就是那些漸變的顏色改變的地方。有了邊緣信息后，接著就要重建邊緣。重建邊緣也許可以再拆分，分為以下幾個(gè)步驟：
- 需要通過(guò)某種方法得到透明度的點(diǎn)
- 這些點(diǎn)需要能夠組成線段
- 線段完全吻合我們的 Gradient
- 使線段覆蓋在 Gradient 的上一層以應(yīng)用我們的修改
這就是大體思路，我們并沒(méi)有參與瀏覽器的渲染，而是通過(guò)像 FXAA 一樣的后處理的方法。在已渲染的圖像上做文章。
比如說(shuō)，我們有這樣一張圖：
.circle-con { $c1: #cd3f4f; $c2: #e6a964; position: relative; height: 300px; background-image: repeating-radial-gradient( circle at 0% 50%, $c1 0, $c2 50px ); }
邊緣信息如下：
我們要做的，就是在它的邊緣處，利用漸變?cè)偕梢欢螡u變，通過(guò)準(zhǔn)確疊加，消除漸變！原理圖如下：
原理可行，但是實(shí)操起來(lái)非常之復(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: ''; 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 ); } } }
最后
簡(jiǎn)單總結(jié)一下，本文介紹了幾種 CSS 中可行的消除漸變鋸齒的方法。
好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 ??
