Sollte der Randradius den Inhalt abschneiden?

Sollte der Inhalt meines Containers nicht abgeschnitten werden, wenn der Container hat border-radius?

Beispiel für HTML und CSS:

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

<div class="progressbar">
    <div class="buffer"></div>
</div>

Wie Sie sehen können, verwende ich border-radiusauf dem Container ( .progressbar), aber der Inhalt ( .buffer) geht 'außerhalb' des Containers . Ich sehe das auf Google Chrome.

Ist das das erwartete Verhalten?

PS Hier geht es nicht darum, wie man es behebt, sondern darum, ob es so funktionieren soll.

Ist das das erwartete Verhalten?

Ja, so verrückt es auch klingt, es ist es tatsächlich. Hier ist der Grund:

Die Standardeinstellung overflowfür <div>Elemente (und die meisten anderen Dinge) ist visible, und die Spezifikation sagt Folgendes aus overflow: visible:

sichtbar
Dieser Wert gibt an, dass der Inhalt nicht abgeschnitten ist, dh außerhalb des Blockfelds gerendert werden kann.

In §5.3 Eckausschnitt im Modul Hintergründe und Rahmen heißt es wiederum:

Die Hintergründe einer Box, aber nicht das Rahmenbild, werden auf die entsprechende Kurve zugeschnitten (wie durch 'Hintergrund-Clip' bestimmt). Andere Effekte, die am Rand oder an der Auffüllkante befestigt werden (z. B. "Überlauf" außer "sichtbar"), müssen ebenfalls an der Kurve befestigt werden. Der Inhalt der ersetzten Elemente wird immer auf die Inhaltskantenkurve zugeschnitten. Außerdem akzeptiert der Bereich außerhalb der Kurve der Randkante keine Mausereignisse für das Element.

Der Satz , dass ich ausdrücklich erwähnt betonte , dass der overflowWert der Box etwas anderes sein muss als visible(das bedeutet auto, hidden, scrollund andere) , um für die Ecken ihrer Kinder zu befestigen.

Wenn für das Feld ein sichtbarer Überlauf definiert ist, der, wie gesagt, die Standardeinstellung für die meisten visuellen Elemente ist, sollte der Inhalt überhaupt nicht abgeschnitten werden. Und deshalb gehen die quadratischen Ecken von .bufferüber die abgerundeten Ecken von .progressbar.

Folglich ist der einfachste Weg, um .bufferinnerhalb .progressbarder abgerundeten Ecken zu schneiden, das Hinzufügen eines overflow: hiddenStils .progressbar, wie in dieser aktualisierten Geige gezeigt .

Für alle, die sich fragen, was eine Lösung wäre. Am einfachsten wäre es, das CSS zu bearbeiten.

In dem angegebenen Beispiel wäre dies eine geeignete Lösung:

.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; }

Semantisch gesehen ist es am besten, dem inneren Div einfach eine Eigenschaft zum Erben eines Randradius hinzuzufügen, daher die neue Klassenaddition:

.buffer {
    border-radius: inherit;
}

Infolgedessen können Sie für andere Situationen die Verwendung von Überlauf beibehalten: Auto, wenn der Inhalt über Ihre Grenzen hinausgeht und Sie alles sehen möchten.

Diese Frage scheint auf denselben Fehler hinzuweisen, anscheinend handelt es sich um einen Fehler.

Probleme beim Abschneiden des CSS3-Rahmenradius

Bearbeiten

Eek! BoltClock hat erwähnt, dass dies indiziert ist, daher werde ich diese andere SO-Frage zum Thema posten, während ich auch nach einem speziellen Zitat zu diesem Thema suche. Wie verhindere ich mit CSS3, dass ein Bild über ein Feld mit abgerundeten Ecken läuft?

Spezifikationslink

Nur als Referenz werde ich den entsprechenden Link einfügen - aber ich kann nichts explizites zu dem Beispiel finden, das Sie gegeben haben.

CSS-Hintergründe - Abgerundete Ecken

Dies ist, was die Spezifikationen sagen, so sollte es funktionieren. Das heißt aber nicht, dass Chrome das so macht.

5.3. Eckausschnitt

Die Hintergründe einer Box, aber nicht das Rahmenbild, werden auf die entsprechende Kurve zugeschnitten (wie durch 'Hintergrund-Clip' bestimmt). Andere Effekte, die am Rand oder an der Auffüllkante befestigt werden (z. B. "Überlauf" außer "sichtbar"), müssen ebenfalls an der Kurve befestigt werden. Der Inhalt der ersetzten Elemente wird immer auf die Inhaltskantenkurve zugeschnitten. Außerdem akzeptiert der Bereich außerhalb der Kurve der Randkante keine Mausereignisse für das Element.

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

Die Kanten und Ecken des übergeordneten Containers sind von Quilt-Elementen bedeckt, sodass der Inhalt des übergeordneten Elements zugeschnitten werden muss, solange der overflowWert nicht festgelegt visibleist. Beispiel:

  .parent {
    overflow: hidden;
    border-radius: 5px;
  }