[英]border-radius + background-color == cropped border
Consider a div
with the border-radius
, border
, and background-color
CSS attributes applied:考虑一个应用了border-radius
、 border
和background-color
CSS属性的div
:
<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;"> Blah </div>
Now consider a similar layout but with the background-color
specified in an inner-div:现在考虑一个类似的布局,但在内部 div 中指定了background-color
:
<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-color
of the inner <div>
is obscuring the border of the outer <div>
.我对内部<div>
的background-color
遮挡了外部<div>
的边框这一事实感到沮丧。
This is a simplified sample of the problem.这是问题的简化示例。 In reality, I'm using a <table>
as the inner element with alternating row colors.实际上,我使用<table>
作为交替行 colors 的内部元素。 And I'm using a <div>
as the outer element since border-radius
does not seem to work on the <table>
element.我使用<div>
作为外部元素,因为border-radius
似乎不适用于<table>
元素。 Here's a jsfiddle of a sample of this problem.这是此问题示例的 jsfiddle 。
Does anyone have a suggestion for a solution?有没有人有解决方案的建议?
Try overflow:hidden
in 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>
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;
}
You can fix this by applying overflow: hidden;
您可以通过应用overflow: hidden;
to the element with the border.到有边框的元素。 A much cleaner way I think.我认为一种更清洁的方式。
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;
}
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>
Add some padding, or do the background color on the outer element添加一些填充,或者在外部元素上做背景色
Would it be acceptable to give the div a little padding?给 div 一点填充可以接受吗? That way the background colors wouldn't conflict.这样背景 colors 就不会发生冲突。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.