渐变刻度的锯齿如何去除
css 中使用线性渐变或径向渐变等技术创建的刻度可能会产生锯齿状边缘。这篇文章将探讨去除这些锯齿的有效方法。
使用抗锯齿处理的图像
由于 css 的抗锯齿效果有限，使用抗锯齿处理后的图像可以显着改善锯齿状边缘。例如，使用 photoshop 或其他图像编辑软件，将渐变导出为无锯齿的 png 图像。
立即学习“前端免费学习笔记（深入）”；
css 抗锯齿技术
虽然效果一般，但css 中提供了部分抗锯齿技术，包括：
- repeating-conic-gradient()： 可以通过创建微妙的透明锥形渐变来模糊边缘。
使用示例
根据提供的代码，使用css 抗锯齿的效果代码如下：
.com {
--size: 200px;
--degree: 100;
height: calc(var(--size)/2);
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
}
.bg {
width: var(--size);
height: var(--size);
border-radius: 50%;
background: linear-gradient(-90deg, transparent calc(var(--size)/2), #fff 0), radial-gradient(#fff 0 90px, transparent 0), conic-gradient(rgba(6, 212, 180, 1) 20deg, rgba(255, 195, 85, 1) 45deg 70deg, rgba(255, 80, 100, 1) 90deg);
-webkit-mask: repeating-conic-gradient(
#000 0 .8deg, transparent 1deg calc(360 / var(--degree) * 1deg)
);
transform: rotate(-89deg);
margin-bottom: calc(var(--size)/2 * -1);
}对于不同的效果，可能需要调整--degree 变量的值。
