So machen Sie CSS-Bilder rund-CSS-Tutorial-php.cn

So machen Sie CSS-Bilder rund

青灯夜游

Freigeben： 2023-01-07 11:44:49

Original

10351 Leute haben es durchsucht

In CSS können Sie das Attribut „border-radius“ verwenden, um das Bild rund zu machen. Fügen Sie einfach den Stil „border-radius: 50 %;“ zum img-Element hinzu. Das Attribut „border-radius“ kann einen abgerundeten Rand für ein Element festlegen. Der Radius der abgerundeten Ecken darf die halbe Breite/Höhe nicht überschreiten.

So machen Sie CSS-Bilder rund

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie das Attribut border-radius verwenden, um das Bild rund zu machen.

Schauen wir uns das folgende Codebeispiel an:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			img{
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="So machen Sie CSS-Bilder rund" >

	</body>
</html>

Nach dem Login kopieren

Rendering:

So machen Sie CSS-Bilder rund

Beschreibung:

Das Attribut „border-radius“ wird verwendet, um einen abgerundeten Rand für das Element festzulegen, und Sie können diesen angeben einen Wert von 1-4. Erstellen Sie (1~4) abgerundete Ecken für den Rand; der Radius der abgerundeten Ecken darf die halbe Breite/Höhe nicht überschreiten.

Syntax:

border-radius: 1-4 length|%

Nach dem Login kopieren

Wert:

Länge Definieren Sie die Form der Kurve.
% Verwenden Sie %, um die Form der Ecken zu definieren.

Hinweis: Die Reihenfolge der vier Werte jedes Radius ist: obere linke Ecke, obere rechte Ecke, untere rechte Ecke, untere linke Ecke. Wenn die untere linke Ecke weggelassen wird, ist die obere rechte Ecke dieselbe. Wenn die untere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe. Wenn die obere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe.

Vier Werte: Der erste Wert ist die obere linke Ecke, der zweite Wert ist die obere rechte Ecke, der dritte Wert ist die untere rechte Ecke und der vierte Wert ist die untere linke Ecke.

Grenzradius: 15px 50px 30px 5pxborder-radius: 15px 50px 30px 5px
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

border-radius: 15px 50px 30px
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

border-radius: 15px 50px
一个值：四个圆角值相同

border-radius: 25px

border-radius: 15px 50px 30px So machen Sie CSS-Bilder rund

🎜🎜🎜🎜Zwei Werte: Der erste Wert ist die obere linke Ecke und die untere rechte Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke 🎜🎜border-radius: 15px 50px🎜🎜

🎜🎜🎜🎜🎜Ein Wert: Die vier abgerundeten Ecken haben den gleichen Wert🎜🎜border-radius: 25px🎜🎜🎜🎜🎜🎜 🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial 🎜)🎜

Das obige ist der detaillierte Inhalt vonSo machen Sie CSS-Bilder rund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!