当使用边框半径时，背景图片的部分会变得可见。

Question

当使用边框半径时，背景图片的部分会变得可见。

7

使用下面的代码，在Mac上支持border-radius的最新版本的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>

- EspenA

2个回答

3

FF3.6也可以用-moz-border-radius实现，但效果不太明显。看起来他们试图自动平滑边角，并且只是不能完全隐藏所有的背景当有边框时。移除边框声明（而不是边框半径）将修复它。所以：

border-radius: 10px; border: 1px solid #fff; 变成： border-radius: 10px;

我猜测，但不确定，这可能与模拟半像素和在更像位图而不是矢量“空间”中嵌套圆形形状的困难有关。

- user241244

我尝试删除边框声明并添加-moz-border-radius，但是然后我在几乎整个提交按钮周围得到了一个灰色边框。请参见：http://skriblerier.net/div/rounded-corners-input/without-border.html - 在Chrome，Firefox和Opera中发生。 - EspenA

啊，我明白了。我需要重置边框声明，而不是完全删除它 :) 所以，基本上：border-radius: 10px; border: 0; 就可以解决问题了。谢谢！ - EspenA

@EspenA 没问题。为了确保万无一失，使用-webkit-，-moz-，以及正常的、无前缀版本，就像你使用这个工具时得到的那样，例如：http://border-radius.com/（-webkit-将获得旧版Safari/Chrome）。 - user241244

是的，我知道（关于前缀）。在调试时，我只是不费心地添加各种前缀。 :) - EspenA

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zajec · Accepted Answer

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

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