Wie erstelle ich ein kreisförmiges Bild mit reinem CSS? (Codebeispiel)

Haben Sie jemals darüber nachgedacht, wie Sie alle Arten von kreisförmigen Bildern erstellen können, ohne PS zu verwenden? .

Grundlegender Code

Beginnen wir mit grundlegendem HTML und CSS (ich gehe davon aus, dass Sie ein leeres HTML-Dokument einrichten und ein Stylesheet damit verknüpfen können).

<div class="img-circular"></div>

Lassen Sie uns einen Grundstil für die Klasse img-circular festlegen.

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('image/flower.jpg');
 background-size: cover;
 display: block;
}

Der Effekt ist wie folgt:

Erklärung: „background -size“ im obigen Code ist ein neues CSS3-Attribut, das mit der Größe von bedient werden kann der Hintergrund. Sie können die Breite und Höhe festlegen, indem Sie genaue Pixelwerte und Prozentsätze eingeben oder eine Hintergrundabdeckung erstellen oder sie an den gesamten Container anpassen. Weitere Informationen finden Sie im Dokument zur Hintergrundgröße. (Verwandte Empfehlungen: CSS3-Lernhandbuch)

Als nächstes erklären wir ausführlich die CSS-Implementierung kreisförmiger Bilder

Jetzt haben wir Bild, das zu unserem quadratischen Behälter passt. Lassen Sie uns den CSS-Code ändern, um einen kreisförmigen Rahmen zu erstellen. Wir werden das Attribut „border-radius“ verwenden, das uns die Möglichkeit gibt, um die Ecken des Elements herumzugehen, auf das es angewendet wird. Damit wir ein kreisförmiges Bild erhalten, müssen wir dem Bild einen Wert geben, der halb so groß ist wie das Bild. Unser CSS-Code sieht jetzt so aus:

	.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('image/flower.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

Die CSS-Implementierung des kreisförmigen Bildes lautet wie folgt:

Hinweis: Es ist jetzt vollständig verwendbar CSS um kreisförmige Bilder zu realisieren! Neue CSS-Eigenschaften ermöglichen es uns, mit Photoshop zeitsparende Effekte zu erstellen.

Erweiterungen

Wenn Sie sich die Grenzradius-Eigenschaft genau ansehen, können Sie die Ecken des Bildes asymmetrisch manipulieren Konkret können Sie sich den folgenden CSS-Code

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('image/flower.jpg');
 background-size: cover;
 display: block;
 border-top-left-radius: 100px;
 -webkit-border-top-left-radius: 100px;
 -moz-border-top-left-radius: 100px;
 border-bottom-right-radius: 100px;
 -webkit-border-bottom-right-radius: 100px;
 -moz-border-bottom-right-radius: 100px;
}

ansehen. Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein kreisförmiges Bild mit reinem CSS? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!