CSS 1px边框行程围绕边界半径 [英] CSS 1px border stroke breaks around border radius

问题描述

这是为web开发。当在圆形或具有真圆角的正方形上使用1px的边界半径时，笔画开始破裂。如果我们把它改为2px，它会越来越好，更多的px我们添加。但是有一个方法来解决这个问题与1px笔画？

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?

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

附加图片！

推荐答案

添加 box-shadow：0 0 1px 0px white inset，0 0 1px 0px white; 会给你正在查看的抗锯齿for。

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.

这篇关于CSS 1px边框行程围绕边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！