极客观点
项目管理
HarmonyOS
用渐变做了渐变的刻度，产生了锯齿，请问如何才能去除锯齿？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<style>
.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);
}
</style>
</head>
<body>
<div class="com">
<div class="bg">
</div>
</div>
</body>
</html>
html5
楼主给的例子用 CSS 抗锯齿效果一般，可以考虑使用抗锯齿处理后的图片做替代。
图片贴上来很糊，看不清效果，直接上代码吧。根据你提供的代码使用渐变做抗锯齿的效果示例见：CSS 抗锯齿效果。
CSS 抗锯齿处理后可以显著改善毛边的效果，但是达不到完美。其原理是在背景色和主色之间添加一层透明渐变，这样做的话需要修改实现对应效果的元素的样式属性，所以也可以通过叠加一层透明渐变的到对应元素来达到效果。两种方式各有优劣，具体的代码细节见评论区 Coco 的文章或者我的博客《CSS POAA》。