border-radius带来的锯齿问题

Snack2026-01-16 10:05

可交互按钮边框锯齿

在使用taro开发项目的时候，遇到一个问题。使用原生的button，为其加上圆角和边框宽度后会出现锯齿现象。具体场景如下。

一般边框颜色和另一半边框不一致。使用的TailwindCSS原子化样式。具体代码如下：

JavaScript 复制代码

<button

      onClick={() => setLiked(!liked)}

      className={`flex items-center gap-2 px-4 py-2 rounded-full border-2 transition-all ${

        liked

          ? " border-2 border-red-500 bg-gradient-to-r from-red-50 to-pink-50 text-red-600 scale-105"

          : "border-gray-200"

      }`}

    >

      <ThumbsUp className="w-4 h-4" />

      <span className="font-medium">

        我懂你 {post.likes + (liked ? 1 : 0)}

      </span>

</button>

产生锯齿的原因

圆角 / rounded-full → 曲线越多，像素对齐越难

边框宽度为 2px → 最容易落在半像素上

使用 transform / scale / 动画 → 整数像素被拉成小数

高对比颜色（红 / 黑 / 白） → 抗锯齿混色更明显

我的解决办法

使用TailwindCSS中的ring来实现渲染边框。并将边框样式设置为none

JavaScript 复制代码

<button

  onClick={() => setLiked(!liked)}

  className={`flex items-center gap-2 px-4 py-2 rounded-full border-none transition-all ${

    liked

      ? " ring-2 ring-red-500 bg-gradient-to-r from-red-50 to-pink-50 text-red-600 scale-105"

      : "ring-gray-200"

  }`}

>

  <ThumbsUp className="w-4 h-4" />

  <span className="font-medium">

    我懂你 {post.likes + (liked ? 1 : 0)}

  </span>

</button>

这样就解决了border圆角边框渲染带来的锯齿问题。

总结

"border 是盒模型的一部分，承担结构边界；ring 本质是 box-shadow，不占布局，更适合交互态和圆角场景，在动画和可访问性上也更友好。"