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

Esp*_*enA 5 css rounded-corners css3

使用下面的代码,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>
Run Code Online (Sandbox Code Playgroud)

小智 9

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

background-clip: padding-box;  
-moz-background-clip: padding;  
-webkit-background-clip: padding;
Run Code Online (Sandbox Code Playgroud)