在 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 ></div>
<div ></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 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/521880.html
標籤：其他
上一篇：瀏覽器本地存盤