渐变刻度的锯齿如何去除？

作者站长头像
站长
· 阅读数 15

用渐变做了渐变的刻度，产生了锯齿，请问如何才能去除锯齿？

<!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>
回复
1个回答
avatar
test
2024-07-12

楼主给的例子用 CSS 抗锯齿效果一般，可以考虑使用抗锯齿处理后的图片做替代。

图片贴上来很糊，看不清效果，直接上代码吧。根据你提供的代码使用渐变做抗锯齿的效果示例见：CSS 抗锯齿效果。

CSS 抗锯齿处理后可以显著改善毛边的效果，但是达不到完美。其原理是在背景色和主色之间添加一层透明渐变，这样做的话需要修改实现对应效果的元素的样式属性，所以也可以通过叠加一层透明渐变的到对应元素来达到效果。两种方式各有优劣，具体的代码细节见评论区 Coco 的文章或者我的博客《CSS POAA》。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容