共计 3486 个字符，预计需要花费 9 分钟才能阅读完成。
在 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 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
);
}
}通过伪元素叠加的意思是，在产生锯齿的中央，实现一个平滑过渡进行笼罩：
成果如下：
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 中可行的打消突变锯齿的办法。
好了，本文到此结束，心愿本文对你有所帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。