Html 边框半径 + 背景颜色 == 裁剪边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6312067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
border-radius + background-color == cropped border
提问by Kirk Woll
Consider a divwith the border-radius, border, and background-colorCSS attributes applied:
考虑div应用了border-radius、border和background-colorCSS 属性的 a：
<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
Blah
</div>
Now consider a similar layout but with the background-colorspecified in an inner-div:
现在考虑一个类似的布局，但background-color在内部 div 中指定：
<div style="border-radius:10px; border: 1px black solid;">
<div style="background-color:#EEEEEE;">
Blah
</div>
</div>
I'm dismayed by the fact that the background-colorof the inner<div>is obscuring the border of the outer<div>.
我被事实感到震惊background-color的的内部<div>是模糊的边界外<div>。
This is a simplified sample of the problem. In reality, I'm using a <table>as the inner element with alternating row colors. And I'm using a <div>as the outer element since border-radiusdoes not seem to work on the <table>element. Here's a jsfiddleof a sample of this problem.
这是问题的简化示例。实际上，我使用 a<table>作为具有交替行颜色的内部元素。我使用 a<div>作为外部元素，因为border-radius它似乎不适用于该<table>元素。这是此问题示例的jsfiddle。
Does anyone have a suggestion for a solution?
有没有人有解决方案的建议？
回答by Dotan
Try overflow:hiddenin the outer div:
overflow:hidden在外部尝试div：
<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
<div style="background-color:#EEEEEE;">
Blah
</div>
</div>回答by melhosseiny
Add these CSS rules:
添加这些 CSS 规则：
tr:first-of-type td:first-child {
border-top-left-radius: 5px;
}
tr:first-of-type td:last-child {
border-top-right-radius: 5px;
}
tr:last-of-type td:first-child {
border-bottom-left-radius: 5px;
}
tr:last-of-type td:last-child {
border-bottom-right-radius: 5px;
}
See updated fiddle.
请参阅更新的小提琴。
回答by Mark W
You can fix this by applying overflow: hidden;to the element with the border. A much cleaner way I think.
您可以通过应用overflow: hidden;到带有边框的元素来解决此问题。我认为一种更清洁的方式。
回答by ngen
Does a table have to be used? Here's an example using DIV's: http://jsfiddle.net/6KwGy/1/
必须使用表吗？这是使用 DIV 的示例：http: //jsfiddle.net/6KwGy/1/
HTML:
HTML：
<div id="container">
<div class="row">
<div class="leftHalf">
<p>data 1</p>
</div>
<div class="rightHalf">
<p>data 2</p>
</div>
</div>
<div class="row">
<div class="leftHalf">
<p>data 1</p>
</div>
<div class="rightHalf">
<p>data 2</p>
</div>
</div>
<div class="row">
<div class="leftHalf">
<p>data 1</p>
</div>
<div class="rightHalf">
<p>data 2</p>
</div>
</div>
</div>
CSS:
CSS：
.container {
width: 100%;
}
.leftHalf {
float:left;
width:50%;
}
.rightHalf {
float:left;
width:50%;
}
.row {
float: left;
width: 100%;
}
#container .row:nth-child(odd) {
background-color: #EEEEEE;
}
#container .row:first-child {
border-top: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-radius-topleft: 5px;
-webkit-border-radius-topright: 5px;
}
#container .row:last-child {
border-bottom: 1px solid black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-radius-bottomleft: 5px;
-webkit-border-radius-bottomright: 5px;
}
#container .row {
border-left: 1px solid black;
border-right: 1px solid black;
}
回答by gnur
Add some padding, or do the background color on the outer element
添加一些填充，或在外部元素上做背景颜色
回答by ern
Would it be acceptable to give the div a little padding? That way the background colors wouldn't conflict.
给 div 一些填充是否可以接受？这样背景颜色就不会冲突了。
回答by Henrique Lobato Zago
You could add border-radius to the child element too.
您也可以将 border-radius 添加到子元素。
<div style="border-radius:10px; border: 1px black solid;">
<div style="background-color:#EEEEEE; border-radius:10px;">
Blah
</div>
</div>