web-dev-qa-db-ger.com

rahmenradius + Hintergrundfarbe == beschnittener Rand

Betrachten Sie eine div mit den angewendeten CSS-Attributen border-radius, border und background-color:

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

enter image description here

Betrachten Sie nun ein ähnliches Layout, jedoch mit dem background-color in einem inner-div angegeben:

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

enter image description here

Ich bin bestürzt darüber, dass der background-color von inner<div> den Rand von outer<div> verdeckt. 

Dies ist ein vereinfachtes Beispiel für das Problem. In Wirklichkeit verwende ich einen <table> als inneres Element mit abwechselnden Zeilenfarben. Und ich verwende einen <div> als äußeres Element, da border-radius an dem <table>-Element nicht zu funktionieren scheint. Hier ist ein jsfiddle einer Probe dieses Problems.

Hat jemand einen Lösungsvorschlag? 

htmlcssborderbackground-colorcss3
55
Kirk Woll

Versuchen Sie overflow:hidden in der äußeren div:

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

102
Dotan

Fügen Sie diese CSS-Regeln hinzu:

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

Siehe aktualisierte Geige .

9
melhosseiny

Sie können dies beheben, indem Sie overflow: hidden; auf das Element mit dem Rahmen anwenden. Ich denke viel sauberer.

3
Mark W

Muss ein Tisch verwendet werden? Hier ein Beispiel mit DIVs: 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;
}
2
ngen

Sie können dem untergeordneten Element auch einen Randradius hinzufügen.

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

0
Henrique Lobato Zago

Fügen Sie etwas Abstand hinzu oder bearbeiten Sie die Hintergrundfarbe des äußeren Elements 

0
gnur

Wäre es akzeptabel, dem Div etwas Polsterung zu geben? Auf diese Weise würden sich die Hintergrundfarben nicht widersprechen.

0
ern