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

Question

我想知道如何修复此播放按钮的边框.它有1px边框和50%边框半径,看起来很丑.2px看起来不错,但我需要1.

Answer 1

Guy 在这里解决了同样的问题.

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

请参阅此文章以获得更好的解释.

或尝试 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 透明效果来减小边框的大小