la frontera de radio + background-color == recortadas frontera

Question

Considere un div con el border-radius, border y background-color atributos CSS aplicados:

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

Ahora consideremos una diseño similar pero con el background-color especificado en un inner-div:

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

estoy consternado por el hecho de que el background-color del interior <div> oscurece la frontera exterior de la <div>.

Esto es una muestra simplificada del problema. En realidad, estoy usando un <table> como elemento interno con colores de filas alternados. Y estoy usando un <div> como elemento externo ya que border-radius no parece funcionar en el elemento <table>. Here's a jsfiddle de una muestra de este problema.

¿Alguien tiene alguna sugerencia para una solución?

Answer 1

Trate overflow:hidden en el exterior div:

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

Answer 2

Añadir un poco de relleno, o hacer el color de fondo en el elemento exterior

Answer 3

¿Sería aceptable dar el div un poco de relleno? De esa forma, los colores de fondo no entrarán en conflicto.

Answer 4

Añadir estas reglas 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;  
} 

ver firmware fiddle.

Answer 5

¿Se debe usar una tabla? Aquí hay un ejemplo usando 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; 
} 

Answer 6

Puede solucionar este problema mediante la aplicación de overflow: hidden; al elemento con la frontera. Una manera mucho más limpia, creo.

Answer 7

Se podría añadir la frontera de radio al elemento hijo también.

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