邊界 - 半徑在safari下（醜陋的剪輯）失敗

有沒有人知道一個解決方法，以在Safari瀏覽器中「錯誤」？邊界 - 半徑在safari下（醜陋的剪輯）失敗

當我使用border-radius在CSS3中創建圓角邊框時，它僅適用於Safari，FF等。

但是，當border-color是背景中的顏色時，您可以看到容器背景與邊框重疊。

你可以在這裏嘗試一下：http://de.roundedcorner.org/css3-rounded-corner-generator只需設置邊框顏色和網站後臺#333333

感謝您的幫助！

來源

2011-03-06 Gundon

這很可能是由於背景裁剪。

以下應該正確。

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

對於一些更多的背景夾，看看這裏： https://developer.mozilla.org/en/CSS/background-clip

來源

2011-03-06 16:32:49

作爲進一步的說明，我想補充一點，使用這個剪輯選項可能會導致類似的問題發生在元素內部，邊界和背景之間。有趣！ :) – 2011-03-10 18:05:28

我也有一個圓角的剪輯問題 - 我不知道它是否屬於同一職權範圍，但背景剪輯沒有解決它。它涉及到顏色的'暈'：http://jsfiddle.net/jSRND/ 任何想法？如果不是相同的問題，將啓動一個新的線程。 – iamkeir 2011-10-06 10:43:50

在Twitter上找到了一個解決方案，由@neil_pie提供：http://jsfiddle.net/dwYCg/8/ – iamkeir 2011-10-06 10:56:23

背景夾屬性用來確定是否背景延伸到邊界與否。默認值是邊框，這意味着它可以擴展到邊框中，但如果將其設置爲填充框，則不會。如果您使用內容框，則背景只能擴展到內容區域。（來源：http://www.css3.info/preview/background-origin-and-background-clip/）

解決您的問題是使用： -webkit-background-clip：padding-box;

重要的是要注意，如果你使用速記符號來指定你的其他背景屬性，那麼應該在這些之後添加它。看起來，速記符號意味着默認的剪輯值將覆蓋先前設置的剪輯值。（來源：http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed）

來源

2011-09-24 19:58:17 Pavot

邊界 - 半徑在safari下（醜陋的剪輯）失敗

回答

相關問題