Heim > Artikel > Web-Frontend > So zeigen Sie kreisförmige Bilder in CSS3 an
So zeigen Sie kreisförmige Bilder in CSS3 an
- php中世界最好的语言Original
- 2017-11-22 16:23:275361Durchsuche
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}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>
2. Entsprechender CSS-Code:
#div{ margin:10px auto}
#div img{ border-radius:50%}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:
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!