使用邊界半徑時可見的背景圖像部分

使用下面的代碼，Mac和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>

來源

2010-03-06 EspenA

我工作圍繞此背景夾：http://www.css3.info/preview/background-origin-and-background-clip/

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

來源

2010-09-19 21:02:00 Zajec

a-ha！這是「填充」，沒有「盒子」。謝謝！這並沒有突出區別：http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed – 2010-10-08 11:11:45

FF3.6做它爲好，但不是明顯（與-moz-邊界半徑，當然）。看起來他們試圖自動平滑角落，並且當應用了邊框時，無法隱藏所有背景。刪除邊界聲明（不是邊界半徑）將修復它。所以：

border-radius: 10px; border: 1px solid #fff;使其：border-radius: 10px;

我懷疑，但不知道，這已經與僞造多個位圖矢量超過一半的像素和築巢圓狀的困難做「空間」。

來源

2010-03-06 22:34:40

我試圖消除邊界聲明，並添加-moz-邊界半徑爲好，但後來我避開灰色邊框幾乎整個提交按鈕。請參閱：http://skriblerier.net/div/rounded-corners-input/without-border.html - 發生在Chrome，Firefox和Opera上。 – EspenA 2010-03-06 23:56:52

啊，明白了。我需要重置邊框聲明，而不是完全刪除它:)所以，基本上：border-radius：10px; border：0;做的伎倆。謝謝！ – EspenA 2010-03-07 00:02:53

@EspenA沒問題。要覆蓋您的基地，請使用-webkit-，-moz-，*和*正常的無前綴版本，例如您在使用此工具時獲得的內容，例如：http://border-radius.com/（-webkit- will獲取舊版本的Safari/Chrome）。 – 2010-03-07 00:47:14

使用邊界半徑時可見的背景圖像部分

回答

相關問題