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

Question

这适用于网络开发。在圆形或具有非常圆角的正方形上使用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 Point的东西，我们不应该做那样的事情，但有时我们必须解决不完美的渲染，或使用过时的方法。

Answer 3

指定背景和边框时很常见。修复此问题的唯一方法是使用两个单独的元素，一个具有背景颜色，另一个具有边框颜色，填充等于边框宽度。

有关更好的解释，请参阅this article。