为什么背景会覆盖我的圆角？
当我使用 CSS 圆角时，它们看起来像这样，非常棒：
http: //www.incompetence-central.co.uk/roundedcorners-nobg.png
但是，如果我为其中的元素指定背景颜色（在本例中是一个简单的
标签），背景颜色覆盖圆角，如下所示：
http:// www.incompetence-central.co.uk/roundedcorners-bgcolor.png
我怎样才能保持漂亮的圆角而不用背景颜色绘制它们？我尝试为内部元素指定相同的圆角，但如果我这样做，背景颜色不会完全填充空间：
http://www.incompetence-central.co.uk/roundedcorners-hack.png
When I use CSS rounded corners, they look like this, and it's great:
http://www.incompetence-central.co.uk/roundedcorners-nobg.png
But if I specify a background color for an element inside them (in this case a simple <p> tag), the background color overlays the rounded corners, like so:
http://www.incompetence-central.co.uk/roundedcorners-bgcolor.png
How can I keep my pretty rounded corners without the background color drawing over them? I tried specifying the same rounded corners for the element inside, but if I do that the background color doesn't completely fill the space:
http://www.incompetence-central.co.uk/roundedcorners-hack.png
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
考虑到边框宽度，一些数学知识也可能有所帮助。如果边框半径为 5px，边框宽度为 1px，则内部元素应使用边框半径 4px（5px - 1px 边框）。实验看看。
A little math may help too, taking border width into account. If your border radius is 5px, and border width is 1px, then the inner element should use border-radius 4px (5px - 1px border). Experiment and see.
不要指定内部元素的背景颜色，而只指定该特定元素（带有边框）。
Don't specify the background color in an inside element, but just that particular element (with the border).
为什么不将外部元素的背景颜色设置为与其边框相同？这样你就不会像图像中看到的那样在角落里出现小空白。
你永远不会让它完全完美，但有可能让它接近完美，这样用户只是浏览就不会看到差异。
Why don't you set the background colour of the outside element to the same as it's border? That way you won't have the little white space on the corners like you see in your image.
You'll never get it completely perfect, but it is possible to get it as close to perfect so that users just browsing won't see a difference.