Warum gehen Inhalte im Webdesign über abgerundete Ecken hinaus?

Abgerundete Ecken und Inhaltsausschnitte: Erwartet oder unerwartet?

Im Webdesign werden häufig abgerundete Ecken (Randradius) verwendet Wunsch, optisch ansprechende Layouts zu erstellen. Es entsteht jedoch ein rätselhaftes Problem, wenn der Inhalt scheinbar über die abgerundeten Kanten seines Containers hinausragt.

Beispiel:

Bedenken Sie das folgende 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>

In diesem Beispiel hat das Div mit der Klasse „progressbar“ abgerundete Ecken, aber das darin enthaltene Div („Puffer“) scheint sich von diesen Einschränkungen zu lösen und erstreckt sich über die gekrümmten Kanten hinaus.

Die Wahrheit enthüllt:

Überraschenderweise ist dieses Verhalten von Webbrowsern beabsichtigt. Gemäß der CSS-Spezifikation ist der Standard-Überlaufwert für Elemente (einschließlich Divs) „visible“, wodurch sich Inhalte über die Grenzen des Elements hinaus erstrecken können.

Die Eigenschaft „border-radius“ wirkt sich jedoch nur auf die aus Hintergrund des Elements und schneidet seinen Inhalt nicht ab. Um Inhalte an den geschwungenen Rändern auszuschneiden, muss der Überlaufwert auf einen anderen Wert als „sichtbar“ eingestellt werden, z. B. „versteckt“ oder „scrollen“.

Lösung Nirvana:

Um dieses Problem zu beheben, setzen Sie einfach die Überlaufeigenschaft des Containers („Fortschrittsleiste“) auf „versteckt“, wie in diesem geänderten Snippet zu sehen ist:

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

Dadurch wird der darin enthaltene Inhalt angezeigt Der Behälter wird ordnungsgemäß an den gebogenen Kanten befestigt, sodass Sie den gewünschten visuellen Effekt erzielen.

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