Zwingen Kind zu gehorchen, Eltern gekrümmten Ränder in CSS

Ich habe ein div in einem anderen div. #outer und #inner. #outer hat geschwungene Ränder und einen weißen hintergrund. #inner hat keine Gebogenen Ränder und einen grünen hintergrund. #inner erstreckt sich über die gekrümmte Grenzen #outer. Gibt es trotzdem, um dies zu stoppen?

CSS:

#outer { 
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }

HTML:

 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>

Egal, wie ich versuche es noch überschneidungen. Wie kann ich #inner gehorchen und füllen #outer's Grenzen?

Bearbeiten

Den folgenden hack diente dem Zweck, für jetzt. Aber die Frage steht (vielleicht zu den CSS3-und webbrowser-Schriftsteller): Warum nicht Kind-Elemente gehorchen Ihren Eltern geschwungene Ränder, und ist es sowieso, um Sie zu zwingen?

Den hack zu bekommen, um dieses für meine Bedürfnisse jetzt ordnen Sie die Kurven für die einzelnen Grenzen. Also für meine Zwecke, den ich nur zugewiesen, eine Kurve, um die top-zwei der inneren element.

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

Haben Sie versucht, genau das gleiche border-radius-zu dem internen element?
Aber ich möchte den border-radius des inneren Elements werden direkt auf den Boden. Ist es möglich einen border-radius, nur für eine bestimmte Ecke?
Für Sie sicher. Sie können sogar ordnen Sie Sie wie border-radius: TL TR BL BR.
Ich lese das so als "Zwingt Kind zu gehorchen, Eltern-Aufträge". 🙂
Mit Ausnahme von Safari -moz-border-radius und border-radius kann verwendet werden, als eine Kurzform mit vier Werten: 10px 10px 0 0. Für Safari aber Sie müssen einzeln eingestellt werden.

InformationsquelleAutor Daniel Bingham | 2010-09-15

css css3

158

Gemäß den Spezifikationen:

Einer box Hintergründe, aber nicht seine
border-image, werden abgeschnitten, um die
entsprechenden Kurve (wie entschlossen, durch
'background-clip'). Andere Effekte, dass
clip der border oder padding edge
(z.B. "überlauf" andere als
'sichtbar'), auch der clip an der
Kurve. Den Inhalt ersetzt
Elemente ist immer getrimmt werden, um die
Inhalte-edge-Kurve. Außerdem ist das Gebiet
außerhalb der Kurve von der Grenze edge
akzeptiert keine Maus-events im Auftrag
der element.

http://www.w3.org/TR/css3-background/#the-border-radius

Dies bedeutet, dass ein overflow: hidden auf #outer funktionieren sollte. Jedoch, dies funktioniert nicht für Firefox 3.6 und unten. Dies wird behoben, in Firefox 4:

Abgerundeten Ecken jetzt clip-Inhalte und Bilder (wenn overflow: visible nicht gesetzt).

https://developer.mozilla.org/en/CSS/-moz-border-radius

Also musst du noch das Update, nur kuerzen auf:
```
#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}
```
Sehe es hier: http://jsfiddle.net/VaTAZ/3/
- Bingo, ich wurde getestet mit Firefox 3.6. So das erklärt es.
- Wer kommt in dies spät im Spiel, overflow: hidden; funktioniert auf den aktuellen Versionen von FF. Stellen Sie sicher, testen Sie so weit zurück wie Ihre Anforderungen benötigen.
- Nur wollen, beachten Sie, dass die Geige hat Marge, also den tatsächlichen Effekt von overflow hidden versteckt ist
- Was, wenn wir nicht wollen, dass der überlauf Inhalte versteckt werden? Ein versteckter überlauf wird abgeschnitten Dinge wie tooltip-popups und Fenster-Menüs, die erscheinen, inside.
- Fügen Sie einfach overflow: hidden; und border-radius zum äußeren DIV
InformationsquelleAutor Yi Jiang

Was wäre falsch daran?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

Ich möchte die unten scharf in die enge getrieben. Dies würde zwei inneren divs, eine ein negatives margin, überlappen sich die anderen.
Hmm... stellt sich heraus, Sie können individuelle Ecken. Also ich habe gerade die beiden oberen.

InformationsquelleAutor Jarrett Widman

Wenn Sie wollen scharfe Kanten an der Unterseite:
Verwenden Sie diese :

border-top-left-radius: 10px; 
border-top-right-radius: 10px; 

-moz-border-radius-topleft 
-moz-border-radius-topright

InformationsquelleAutor tdtje

haben Sie versucht, die position:relative für das innere div-Element ???

ist:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}

Versucht, hat nicht funktioniert in firefox. Gute Idee, obwohl.

InformationsquelleAutor Naveed Butt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.