边缘半径出血

Question

我想将border-radius赋予<nav> <a>，其中所有{{1}}图像都有背景，但图像一直在边界半径之外。这是为什么？

Answer 1

要在所有浏览器中修复此问题，您应该使用：

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

我找到了答案here

Answer 2

添加：

-webkit-background-clip: padding-box;

要在Webkit中修复此问题。

Answer 3

我在bootstrap panel上方有HTML边框或背景<h> element标头bootstrap panel有背景出血的问题。 <h>元素具有class="page-header"，并与div一起包含在class="col-lg-12"元素中。这里和其他地方的答案对我都无效。

有效的方法是将其添加到panel的CSS类中：

overflow:hidden;

我从Carol的回答中得到了here的指导。

编辑：

这给我带来了另一个问题。我在面板中有下拉菜单控件，overflow:hidden;导致下拉菜单被剪切并完全显示。

下拉列表包含在Bootstrap div类的col-lg元素中。我向包含下拉菜单的style="position: inherit"元素中添加了div，从而解决了问题。

我找到了here的解决方案。

其他选项：

我在<br/>标签之前添加了3或4个div元素，这些元素正在出血，并且解决了出血问题，并且没有任何不良副作用。