So zeigen Sie kreisförmige Bilder in CSS3 an-HTML-Tutorial-php.cn

So zeigen Sie kreisförmige Bilder in CSS3 an

php中世界最好的语言

Freigeben： 2017-11-22 16:23:27

Original

5427 Leute haben es durchsucht

Viele Freunde wissen nur, wie man Bilder anzeigt, aber sie wissen nicht, wie man ein CSS-Layout verwendet, um kreisförmige Bilder zu realisieren. Deshalb werde ich Ihnen heute beibringen, wie man CSS verwendet, um kreisförmige Bilder anzuzeigen

Zuerst muss das Bild quadratisch sein.

Verwendung von Layout-Technologie

Verwendung von CSS3-Technologie mit abgerundeten Ecken.

Verwenden Sie Wörter im CSS3-Stil: border-radius

Syntax:

div{border-radius:5px}

Nach dem Login kopieren

Abgerundete Ecken für das Bild festlegen:

.abc img{border- radius:5px}

Klasse = „abc“ festlegenObjektDie vier Ecken des Bildes werden auf 5 Pixel abgerundet

CSS abgerundete Ecken, um das Bildkreisbeispiel zu erreichen

Legen Sie zunächst ein quadratisches Bild in eine DIV-Box und erzielen Sie einen kreisförmigen Effekt, indem Sie für das Bild in der Box den Randradius: 50 % festlegen.

1. Vollständiger HTML-Quellcode:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>图片圆形布局 在线演示</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
<div id="div"><img src="images/1.jpg" /></div> 
</body> 
</html>

Nach dem Login kopieren

2. Entsprechender CSS-Code:

#div{ margin:10px auto} 
#div img{ border-radius:50%}

Nach dem Login kopieren

So verwenden Sie ein CSS-Layout, um ein kreisförmiges Bild zu erstellen . Viel mehr. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website anderen verwandten Artikeln!

Verwandte Lektüre:

So verwenden Sie Textdekoration

Verwendung von Tabellen-Tags in HTML-Methode

CSS-Webseiten-Rahmencode

Das obige ist der detaillierte Inhalt vonSo zeigen Sie kreisförmige Bilder in CSS3 an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!