Abgerundete Ecken am rechteckigen Bild nur mit CSS

Schritt 5: Bild rund machen

Greifen Sie mit Hilfe von “auf das Bild zu“FigurUnd setzen Sie verschiedene CSS -Eigenschaften, die im folgenden Code -Snippet erwähnt werden:

Hier:

• “Breite" Und "Höhe”Werden zum Festlegen der Größe des Bildes verwendet.
• “ÜberlaufEigenschaft gibt an, was passieren soll, wenn ein Feld für ein Element überfließen. Dazu wird der Wert dieses Attributs als "festgelegt" festgelegt " versteckt”.
• “Rand”Definiert den Raum um die Grenze des Elements.
• “Grenzradius”Bezeichnet den Eckradius des Elements. Zu diesem Zweck wird der Wert als “festgelegt“50%”Um die Grenze abzurunden.

Ausgang

Schritt 6: Styling auf Bildunterschrift anwenden

Greifen Sie auf die Klasse zu, indem Sie die “verwenden“.UntertitelUnd wenden Sie die folgenden CSS -Eigenschaften an:

Nach dem oben gegebenen Code-Snippet:

• “Rand”Bestimmt den Raum außerhalb der Grenze.
• “Grenze”Definiert eine Grenze außerhalb des Elements.
• “TextausrichtungEigenschaft, die zur Festlegung der Ausrichtung des Textes verwendet wird.
• “HintergrundfarbeEigenschaft gibt die Farbe der Rückseite des Elements an.

Ausgang

Damit geht es darum, die abgerundete Ecke auf einem rechteckigen Bild mit CSS zu machen.

Abschluss

Um die abgerundeten Ecken auf einem rechteckigen Bild zuerst zu machen, fügen Sie zunächst das Bild mit Hilfe des "" Schild. Greifen Sie dann auf das Bild zu und wenden Sie das “anGrenzradius"CSS -Eigenschaft mit dem Wert"50%Das rundet den Bildrand ab. Setzen Sie auch das "Überlauf" als "versteckt”. Dieser Beitrag hat die Methode zum Erstellen abgerundeter Ecken auf rechteckigen Bildern nur mit CSS erklärt.