In diesem Artikel erfahren Sie hauptsächlich den spezifischen Implementierungscode zum Erstellen abgerundeter Bilder und elliptischer Bilder. Er hat einen gewissen Referenzwert.
Die Beispiele in diesem Artikel werden mit Ihnen geteilt . Die Methode zum Erstellen abgerundeter und ovaler Bilder mit CSS3 dient als Referenz:
Abgerundete Bilder
CodeInhalt in die Zwischenablage kopieren
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
2. Ovales Bild
XML / HTML-CodeInhalt in die Zwischenablage kopieren
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Verwandte Empfehlungen:
Verwenden Sie reines CSS Beispiele für die Realisierung dynamischer Texteffekte
Methode zur Einstellung der CSS-Textschriftfarbe (CSS-Farbe)
Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS3 abgerundete Bilder und ovale Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
