问题
I want to give border-radius to a <nav> in which all the <a> have an image has background, but the image keeps going outside the border-radius. Why is that?
回答1:
To fix this in all browsers you should use:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
I found the answer here
回答2:
Add:
-webkit-background-clip: padding-box;
To fix this in Webkit.
回答3:
I had a problem with a bootstrap panel border or background bleeding to a HTML header <h> element above the bootstrap panel. The <h> element has class="page-header" and is contained in a div element with class="col-lg-12". The answers here and in other places didn't work for me.
What worked was adding this to the panels CSS class:
overflow:hidden;
I got the direction from here from Carol's answer.
Edit:
This caused another problem for me. I had Dropdown controls in the panel and the overflow:hidden; caused the dropdowns to be cut off and displayed fully.
The dropdowns are contained in div elements with Bootstrap col-lg classes. I added style="position: inherit" to those div elements containing the dropdowns and that solved the problem.
The solution to that problem I found here.
Additional Option:
I added 3 or 4 <br/> elements before the div tag that was bleeding and that solved the bleeding problem without any bad side effects.
来源：https://stackoverflow.com/questions/5652641/border-radius-bleeding