使用边界半径时的背景溢出边界

Question

我有一个问题，一个元素的背景颜色溢出，它的边界使用边界半径。我见过这个问题很多次了，这不是什么特例。

以下是描述：

我有一个<input type="submit">，它的样式如下：

background-color: #FF0000;
border: 2px solid #222222;
border-radius: 5px;

如果你看一下这张照片，背景颜色在所有四个圆角上都会泛起：

注意:为了更好地了解问题，我使用了浏览器的缩放功能。所以这张照片比原来的要大一点。

​

​

这个问题经常发生，通常我看不到，因为我的颜色在相似的范围内，但当使用完全不同的颜色，如上面的图片，这是显而易见的.

我认为这是浏览器(火狐30和IE11)的渲染问题，因为我看不到使用Google的相同问题。我如何在Firefox和IE中修复这个问题？(不重要)

Answer 1

要在FireFox中解决这个问题，看起来background-clip有一个简单的技巧

background-clip: padding-box;

演示

还有另一种使用线性梯度背景的方法，我发现将background-repeat设置为no-repeat是可行的：

background:linear-gradient(red,red) no-repeat;

演示2