Heim > Artikel > Web-Frontend > Einführung in die Methode zur Erstellung abgerundeter und ovaler Bilder mit CSS3
Einführung in die Methode zur Erstellung abgerundeter und ovaler Bilder mit CSS3
- 高洛峰Original
- 2017-03-07 15:23:072586Durchsuche
In diesem Artikel lernen Sie hauptsächlich den spezifischen Implementierungscode zum Erstellen abgerundeter Bilder und elliptischer Bilder mit CSS3 kennen. Interessierte Freunde können sich darauf beziehen.
Die Beispiele in diesem Artikel werden mit Ihnen geteilt. Die Methode zum Erstellen abgerundeter und ovaler Bilder mit CSS3 dient als Referenz. Der spezifische Inhalt ist wie folgt:
<!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" style="max-width:90%">
</body>
</html>
2. Ovales Bild
<!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" style="max-width:90%">
</body>
</html>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt. 
Weitere Informationen zum Erstellen abgerundeter und ovaler Bilder mit CSS3 finden Sie auf der chinesischen PHP-Website!