邊界半徑+的背景色==裁剪邊界

考慮與border-radius，border一個div，並應用於background-color CSS屬性：邊界半徑+的背景色==裁剪邊界

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;"> 
 
    Blah 
 
</div>

enter image description here

現在考慮類似的佈局，但background-color指定在一個內部div：

<div style="border-radius:10px; border: 1px black solid;"> 
 
    <div style="background-color:#EEEEEE;"> 
 
    Blah 
 
    </div> 
 
</div>

enter image description here

我的事實，的內<div>的background-color是模糊的外<div>邊境沮喪。

這是一個簡化的問題示例。實際上，我使用<table>作爲交替行顏色的內部元素。而且我使用<div>作爲外部元素，因爲border-radius似乎不適用於<table>元素。 Here's a jsfiddle這個問題的一個樣本。

有沒有人有解決方案的建議？

來源

2011-06-10 Kirk Woll

嘗試overflow:hidden外div：

<div style="border-radius:10px; border: 1px black solid; overflow: hidden"> 
 
    <div style="background-color:#EEEEEE;"> 
 
    Blah 
 
    </div> 
 
</div>

來源

2012-09-12 11:39:45 Dotan

這是更好的答案。 – 2014-01-22 05:50:22

添加一些填充物，或做背景色：外部部件

來源

2011-06-10 21:09:58 gnur

我不能設計原因添加填充。正如我所提到的，我的真實應用中的背景顏色來自*交替*行顏色，這將不可能在外部元素上定義。 – 2011-06-10 21:10:58

難道是可以接受的給股利一點點填充呢？這樣背景顏色就不會衝突。

來源

2011-06-10 21:11:02 ern

不，對我來說背景顏色與邊框齊平很重要。（即，我不想[this]（http://jsfiddle.net/jpNy7/10/）） – 2011-06-10 21:12:19

添加這些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;  
}

查看更新後的fiddle。

來源

2011-06-10 21:14:01 melhosseiny

這是非常好的。我寧願在IE8中工作的版本，但如果它是最好的可以完成的話，就會採用這個版本。 – 2011-06-10 21:15:27

是否需要使用表格？下面是使用DIV的一個例子：http://jsfiddle.net/6KwGy/1/

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：

.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; 
}

來源

2011-06-10 21:36:18 ngen

+1用於探索其他選項。但是，由於這使用了「最後一個孩子」，它在IE8中也不起作用，所以我想我最好使用melhosseiny的解決方案。（它更短） – 2011-06-10 22:28:43

我明白，你總是可以爲包含邊界半徑樣式的第一行和最後一行創建一個獨特的類。 – ngen 2011-06-10 23:20:31

您可以通過應用overflow: hidden;與邊境元素解決這個問題。我認爲更清潔的方式。

來源

2012-07-05 10:00:10

你可以邊界半徑增加了子元素了。

<div style="border-radius:10px; border: 1px black solid;"> 
 
    <div style="background-color:#EEEEEE; border-radius:10px;"> 
 
    Blah 
 
    </div> 
 
</div>

來源

2016-09-27 22:34:46

邊界半徑+的背景色==裁剪邊界

回答

相關問題