suchen

Heim >Web-Frontend >CSS-Tutorial >So machen Sie CSS-Bilder rund

So machen Sie CSS-Bilder rund

青灯夜游
青灯夜游Original
2021-07-21 16:55:1610438Durchsuche

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>

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|%

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

    So machen Sie CSS-Bilder rund

  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

    border-radius: 15px 50px 30px

    So machen Sie CSS-Bilder rund

  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

    border-radius: 15px 50px

    So machen Sie CSS-Bilder rund

  • 一个值： 四个圆角值相同

    border-radius: 25px

    So machen Sie CSS-Bilder rund

    So machen Sie CSS-Bilder rund

    • Drei Werte: Der erste Wert ist die obere linke Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke, der dritte Wert ist die untere rechte Ecke

border-radius: 15px 50px 30pxSo 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🎜🎜So machen Sie CSS-Bilder rund🎜🎜🎜🎜🎜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!

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
Vorheriger Artikel：Warum kann das CSS-definierte Hintergrundbild nicht angezeigt werden?Nächster Artikel：Warum kann das CSS-definierte Hintergrundbild nicht angezeigt werden?

In Verbindung stehende Artikel

Mehr sehen