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!