CSS 1px 边框笔划在边框半径周围中断 [英] CSS 1px border stroke breaks around border radius

问题描述

这是针对网络开发人员的.当在圆形或具有真正圆角的正方形上使用 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;
}

附上图片！

推荐答案

add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; 这会给你抗锯齿你正在寻找.

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屋！