suchen

Heim  >  Artikel  >  Web-Frontend  >  Warum geht der Inhalt über abgerundete Ecken hinaus?

Warum geht der Inhalt über abgerundete Ecken hinaus?

Susan Sarandon
Susan SarandonOriginal
2024-11-10 13:11:02838Durchsuche

Why Does Content Extend Beyond Rounded Corners?

Beeinflussen abgerundete Ränder die Sichtbarkeit von Inhalten?

Frage:

Warum wirkt sich der Inhalt von aus? Ein Element mit abgerundeten Rändern (Border-Radius) erstreckt sich über den Container hinaus Grenze?

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>

Erklärung:

Standardmäßig der Inhalt eines

Das Element wird nicht abgeschnitten, wenn ein sichtbarer Überlauf angewendet wird. In der CSS-Spezifikation heißt es eindeutig:

"Der Standardüberlauf für

-Elemente (und die meisten anderen Dinge) ist sichtbar, und die Spezifikation sagt Folgendes über Überlauf: sichtbar:

... Der Inhalt wird nicht abgeschnitten, d. h. er kann außerhalb der Blockbox gerendert werden.“

In der CSS-Spezifikation wird weiter erläutert, dass Elemente mit Abschneiden abgerundeter Ecken nur Auswirkungen auf Hintergrundbilder haben, nicht jedoch Inhalt.

Folgen:

Daher können Inhaltselemente über die abgerundeten Ecken ihres Containers hinausragen, wenn ein sichtbarer Überlauf verwendet wird.

Lösung:

Um sicherzustellen, dass der Inhalt innerhalb der abgerundeten Ecken des Containers abgeschnitten wird, ist ein Überlauf erforderlich Sichtbar (z. B. ausgeblendet, scrollen usw.) muss auf den Container angewendet werden. In diesem Fall wird das Problem durch Hinzufügen von overflow: versteckt zur .progressbar-Klasse behoben.

Das obige ist der detaillierte Inhalt vonWarum geht der Inhalt über abgerundete Ecken hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html if for class default this overflow border background issue
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie erstelle ich ein transparentes Loch in einem CSS-Overlay?Nächster Artikel：Wie erstelle ich ein transparentes Loch in einem CSS-Overlay?

In Verbindung stehende Artikel

Mehr sehen