Beschneidet Border-Radius den Inhalt oder nur den Hintergrund?

Border-Radius Clipping: Das Verhalten verstehen

Frage:

Kann der Inhalt eines Elements mit Border-Radius sein über seine Grenzen hinausgehen?

Angegebenes Beispiel:

Betrachten Sie den folgenden HTML- und CSS-Code:

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

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

.buffer {
    width: 25px;
    height: 5px;
    background: #999999;
}

In diesem Beispiel Das „.buffer“-Element scheint über die abgerundeten Ecken des „.progressbar“-Containers hinauszuragen.

Antwort:

Ja, dieses Verhalten ist beabsichtigt.

Erklärung:

Gemäß der CSS-Spezifikation ist die Standardüberlaufeigenschaft für Elemente „sichtbar“. Dies bedeutet, dass der Inhalt nicht abgeschnitten wird und möglicherweise außerhalb des Containers gerendert wird. Die Eigenschaft „border-radius“ schneidet den Hintergrund des Containers ab, aber wenn die Überlaufeigenschaft auf „sichtbar“ gesetzt ist, wird der Inhalt nicht beeinflusst.

Die CSS-Spezifikation für das Ausschneiden des Hintergrunds besagt, dass „andere Effekte Dieser Clip muss an der Umrandung oder Füllkante befestigt werden (z. B. „Überlauf“, anders als „sichtbar“), muss auch an der Kurve befestigt werden.“ Das heißt, wenn der Überlauf auf etwas anderes als „sichtbar“ eingestellt ist, wird der Inhalt innerhalb der abgerundeten Ecken des Containers abgeschnitten.

Daher muss sichergestellt werden, dass der Inhalt innerhalb der abgerundeten Ecken bleibt um die Überlaufeigenschaft des Containers auf „versteckt“, „scrollen“ oder einen anderen nicht „sichtbaren“ Wert zu setzen. Indem Sie den Überlauf in diesem Beispiel auf „versteckt“ setzen, wird das „.buffer“-Element innerhalb der abgerundeten Ecken des „.progressbar“-Containers abgeschnitten.

Das obige ist der detaillierte Inhalt vonBeschneidet Border-Radius den Inhalt oder nur den Hintergrund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!