Heim >Web-Frontend >CSS-Tutorial >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:072620Durchsuche

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>

Einführung in die Methode zur Erstellung abgerundeter und ovaler Bilder mit CSS32. 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. Einführung in die Methode zur Erstellung abgerundeter und ovaler Bilder mit CSS3

Weitere Informationen zum Erstellen abgerundeter und ovaler Bilder mit CSS3 finden Sie auf der chinesischen PHP-Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn