CSS：border-radius的边框质量很差

Question

我想知道如何修复此播放按钮的边框。它有1px边框和50% border-radius，看起来很难看。 2px看起来不错，但我需要1。

Answer 1

同样的问题由盖伊解决here。

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

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

或尝试box-shadow: 0 0 1px 0px @yourBlueColor inset, 0 0 1px 0px @yourBlueColor;

Answer 2

此问题与屏幕设备的分辨率dpi相关，您可以使用

解决此问题

border: 2px solid rgba(42, 91, 195, 0.35);

使用2px，但也使用rgba透明效果来减小边框的大小

Answer 3

不太好，但是通过将边框设置为1px（具有相同颜色的1px模糊半径的嵌入框阴影）将外观看起来要好得多

border: 1px solid #333;
box-shadow: inset 0 0 1px #333;