Question

使用下面的代码，Mac上的Chrome和Opera（支持border-radius的最新版本）在圆角外显示一个小的蓝色区域（这似乎是定义的背景图像的一部分）。为什么呢？

<!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>

Answer 1

我使用background-clip：http://www.css3.info/preview/background-origin-and-background-clip/

解决了这个问题

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

Answer 2

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

border-radius: 10px; border: 1px solid #fff;制作它：border-radius: 10px;

我怀疑，但不知道，这与伪造半像素和在矢量'空间'的位图中嵌套圆形形状的困难有关。

使用border-radius时可见部分背景图像

2 个答案: