使用边框半径时背景图像的部分可见
使用下面的代码，Mac 上的 Chrome 和 Opera（支持边框半径的最新版本）都会在圆角之外显示一个小的蓝色区域（这似乎是定义的背景图像的一部分）。为什么？
<!doctype html>
<head>
<title>Testcase for rounded corners on submit button with bg-image</title>
<style type="text/css">
input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
</style>
</head>
<body>
<form>
<div><input type="submit" /></div>
</form>
</body>
Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why?
<!doctype html>
<head>
<title>Testcase for rounded corners on submit button with bg-image</title>
<style type="text/css">
input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
</style>
</head>
<body>
<form>
<div><input type="submit" /></div>
</form>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我用background-clip解决了这个问题： http://www. css3.info/preview/background-origin-and-background-clip/
I worked around this with background-clip: http://www.css3.info/preview/background-origin-and-background-clip/
FF3.6 也能做到这一点，但没有那么明显（当然，使用 -moz-border-radius）。看起来他们正在尝试自动平滑角落，并且在应用边框时无法隐藏所有背景。。删除边界声明（而不是边界半径）将修复它。所以：
边框半径：10px；
border: 1pxsolid #fff;制作它：border-radius: 10px;我怀疑，但不知道，这与伪造半像素和在更多位图中嵌套圆形形状而不是矢量“空间”的困难。
FF3.6 does it as well, but not as noticeably (with -moz-border-radius, of course). Looks like they're trying to automatically smooth out the corners, and just can't hide all of the background when there's also a border applied. Removing the border declaration (not the border radius) will fix it. So:
border-radius: 10px;making it:border: 1px solid #fff;border-radius: 10px;I suspect, but don't know, that this has to do with the difficulties of faking half-pixels and nesting round shapes in more of a bitmap than vector 'space'.