logo标签列表

CSS 1像素边框在边框半径处断裂

htmlcssweb
35

这是针对网页开发的。当在圆形或具有非常圆角的正方形上使用1像素边框半径时，描边开始出现问题。如果我们将其更改为2像素，那么随着添加更多像素，它会变得越来越好。但是有没有办法用1像素描边来解决这个问题呢？

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

附带图片！

在此输入图片描述

1
您可以尝试使用box-shadow作为替代方案。它往往具有更平滑的线条。 - TylerH
浏览器是跳过了一个像素还是整个曲线边框？ 如果只是一个像素，也许将边框半径减少1像素可以解决它。 - dzny
3个回答
68

添加box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; 可以帮助你获得所需的抗锯齿效果。

6
box-shadow: 0 0 1px transparent; 可能也可以使用（已在Chrome上测试）。 - oodavid
box-shadow: 0 0 1px transparent; 对我没起作用。 但是 box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; 起了作用！谢谢！ - Alex Zak
2
很遗憾，这方面你无能为力。浏览器会决定如何渲染组成曲线1像素边框的亚像素。一些浏览器可以很好地进行反锯齿处理，而另一些则不能。
唯一可靠的解决方案是使用图片，这种方法有点过时了。总之，我们不应该这样做，但有时我们必须要么接受不完美的渲染，要么使用过时的方法。
2

当有背景和边框指定时，这种情况很常见。唯一的解决方法是使用两个单独的元素，一个带有背景颜色，另一个带有边框颜色，填充等于边框宽度。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接