This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke?
这是为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;
}
Images attached!
附图像！
3 个解决方案
#1
30
add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; that will give you the anti-aliasing you're looking for.
添加box-shadow：0 0 1px 0px白色插图，0 0 1px 0px白色;这将为您提供您正在寻找的抗锯齿。
#2
2
There isn't much you can do about this, unfortunately. That's up to the browser to determine how to render the sub-pixels that make up a curved 1px border. Some browsers will antialias it nicely, others will not.
不幸的是，你无能为力。这取决于浏览器确定如何渲染构成弯曲的1px边框的子像素。有些浏览器会很好地对抗它，有些则不会。
The only reliable solution is to use images, which is so... 90s. Or something XD Point is, we shouldn't have to do things like that, but sometimes we have to either settle for imperfect rendering, or use outdated methods.
唯一可靠的解决方案是使用图像，这是... 90年代。或者是XD Point的东西，我们不应该做那样的事情，但有时我们必须解决不完美的渲染，或使用过时的方法。
#3
2
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
这在指定背景和边框时很常见。修复此问题的唯一方法是使用两个单独的元素，一个具有背景颜色，另一个具有边框颜色，填充等于边框宽度。
See this article for a better explanation.
请参阅此文章以获得更好的解释。
#1
30
add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; that will give you the anti-aliasing you're looking for.
添加box-shadow：0 0 1px 0px白色插图，0 0 1px 0px白色;这将为您提供您正在寻找的抗锯齿。
#2
2
There isn't much you can do about this, unfortunately. That's up to the browser to determine how to render the sub-pixels that make up a curved 1px border. Some browsers will antialias it nicely, others will not.
不幸的是，你无能为力。这取决于浏览器确定如何渲染构成弯曲的1px边框的子像素。有些浏览器会很好地对抗它，有些则不会。
The only reliable solution is to use images, which is so... 90s. Or something XD Point is, we shouldn't have to do things like that, but sometimes we have to either settle for imperfect rendering, or use outdated methods.
唯一可靠的解决方案是使用图像，这是... 90年代。或者是XD Point的东西，我们不应该做那样的事情，但有时我们必须解决不完美的渲染，或使用过时的方法。
#3
2
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
这在指定背景和边框时很常见。修复此问题的唯一方法是使用两个单独的元素，一个具有背景颜色，另一个具有边框颜色，填充等于边框宽度。
See this article for a better explanation.
请参阅此文章以获得更好的解释。