使用边框半径时部分背景图像可见答案

【问题标题】：Parts of background-image visible when using border-radius使用边框半径时部分背景图像可见
【发布时间】：2016-04-20 19:04:24
【问题描述】：

使用下面的代码，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>

【问题讨论】：

标签： rounded-corners css

【解决方案1】：

我使用背景剪辑解决了这个问题：http://www.css3.info/preview/background-origin-and-background-clip/

background-clip: padding-box;  
-moz-background-clip: padding;  
-webkit-background-clip: padding;

【讨论】：

啊哈！它是“填充”，没有“-box”。谢谢！这并没有突出区别：tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

【解决方案2】：

FF3.6 也能做到这一点，但没有那么明显（当然是 -moz-border-radius）。看起来他们正在尝试自动平滑角落，并且无法隐藏所有背景当还应用了边框时。删除边界声明（不是边界半径）将修复它。所以：

border-radius: 10px; <del>border: 1px solid #fff;</del> 成功：border-radius: 10px;

我怀疑，但不知道，这与伪造半像素和将圆形嵌套在更多位图中而不是矢量“空间”中的困难有关。

【讨论】：

我尝试删除边框声明并添加 -moz-border-radius，但随后我几乎整个提交按钮周围都有灰色边框。请参阅：skriblerier.net/div/rounded-corners-input/without-border.html — 发生在 Chrome、Firefox 和 Opera 中。
啊，明白了。我需要重置边界声明，而不是完全删除它:) 所以，基本上：border-radius: 10px;边框：0；成功了。谢谢！
@EspenA 没问题。要覆盖您的基础，请使用 -webkit-、-moz-、和正常的无前缀版本，就像您在使用此工具时获得的那样，例如：border-radius.com（-webkit- 会变老Safari/Chrome 版本）。
是的，我知道（关于前缀）。我只是懒得在调试时添加各种前缀。 :)