CSS 1px边框描边围绕边界半径

Question

这是为web dev.在圆形或具有非常圆角的方形上使用1px边框半径时,笔划开始中断.如果我们将它改为2px,那么我们添加的px越多越好.但有没有办法用1px中风解决这个问题？

background: rgba(32, 32, 32, .9);
height: 30px;
width: 30px;
border: 1px solid white;
border-radius: 20px;
:hover {
 height: 300px;
 width: 200px;
}

附图像!

Answer 1

添加box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;它将为您提供您正在寻找的抗锯齿.

Answer 2

不幸的是，对此您无能为力。由浏览器决定如何渲染构成弯曲 1px 边框的子像素。有些浏览器可以很好地消除锯齿，有些浏览器则不会。

唯一可靠的解决方案是使用图像，这是 90 年代的风格。或者 XD 点是，我们不应该这样做，但有时我们必须要么满足于不完美的渲染，要么使用过时的方法。