1. 首頁 > 生活百科 > >

CSS 漸變鋸齒消失術

生活百科

在 CSS 中，漸變（Gradient）可謂是最為強大的一個屬性之一 。
但是 ， 經常有同學在使用漸變的過程中會遇到漸變圖形產生的鋸齒問題 。
何為漸變鋸齒？那么，什么是漸變圖形產生的鋸齒呢？
簡單的一個 DEMO：
<div></div>div {    width: 500px;    height: 100px;    background: linear-gradient(37deg), #000 50%, #f00 50%, #f00 0);}效果如下：其實 ， 鋸齒感已經非常明顯了，我們再放大了看，其內部其實是這樣的：

CSS 漸變鋸齒消失術

文章插圖
又或者是這樣：
CSS 漸變鋸齒消失術

文章插圖
有意思的是，鋸齒現象在 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% 的漸變過渡空間，效果如下：
CSS 漸變鋸齒消失術

文章插圖
可以看到，效果立馬有了大幅提升！
當然，如果不想修改原代碼，也可以通過疊加一層偽元素實現，這里給出 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        );    }}

推薦閱讀