CSS Runde Kanten
Beispiel # 01:
Lassen Sie uns die Ränder von Bildern oder einigen Absätzen umrunden. Wir haben den HTML -Code mit der Verwendung des HTML -Basis -Tags begonnen, gefolgt vom Kopf -Tag. Das Head -Tag enthält das Titel -Tag, das verwendet wurde, um der Webseite einen Titel als "CSS abgerundete Kanten oder Ecken" zu verleihen. Innerhalb des Körper -Tags des HTML -Dokument. Drei Absätze wurden durch die Verwendung des Absatz -Tags „P“ verwendet.
Die ersten beiden Absätze wurden mit 2 verschiedenen Klassen angegeben: A und B. Der dritte Absatz wurde mit der ID "C" angegeben. Alle diese drei Absätze enthalten Sätze, die als Inhalt des Absatzes verwendet werden könnten. Diese Absätze können mit abgerundeten Kanten auf der HTML -Seite angezeigt werden. Schauen wir uns die CSS dieser Seite an. Innerhalb des Style -Tags dieses HTML -Skript.
Wir haben die Eigenschaft von Border Radius für First Class „A“ verwendet, um den Radius von 25 Pixel hinzuzufügen, und der Hintergrund würde gefärbt, himmelblau. Das Randradius -Eigentum wurde auch für die zweite Klasse verwendet, um den Grenzradius von 45 Pixel mit zwei Pixel festen Rand um ihn herum hinzuzufügen. Für beide ersten Klassen haben wir eine 20-Pixel-Polsterung 200-Pixel-Breite und 50 Pixelhöhe verwendet. Andererseits wurde die dritte Absatz -ID verwendet, um den Radius von 90 Pixel um sie herum hinzuzufügen.
Mit der Hintergrundeigenschaft wurde ein Bild als Hintergrund hinzugefügt. Darüber hinaus wurde die Eigenschaft von Hintergrundpositionen verwendet, um den Hintergrund eines Bildes zu positionieren, und die Hintergrund -Wiederholungseigenschaft wurde so eingestellt, dass sie wiederholt werden. Aufgrund der Verwendung dieser Eigenschaft kann das Hintergrundbild so oft wie möglich wiederholt werden. Die Polsterung, die Höhe und die Breite würden gleich zitiert, wie wir in den oben genannten zwei Stiften für Absätze verwendet werden. Der Code ist jetzt abgeschlossen und wir können ihn über das Menü "Ausführen" der Taskleiste im Visual Studio -Code ausführen.
Die Ausgabe dieses HTML -Codes wurde im Chrome -Browser wie unten angezeigt. Die ersten beiden Absätze wurden im Grenzradius von 25 Pixel bzw. 45 Pixel gestaltet. Beide Absätze enthalten unterschiedliche Hintergründe mit ganz derselben Polsterung, Breite und Höhe. Sie können sehen, dass die Kanten beide Radius des Absatzes abgerundet wurden.
Außerdem wurde der dritte Absatz im Kreisradius von 90 Pixel angezeigt, während das als Hintergrund verwendete Bild viele Male wiederholt wurde.
Beispiel # 2:
Wir müssen dieses Beispiel mit dem Haupt -HTML -Tag und dem Kopf -Tag initialisieren. Das Titel -Tag wurde verwendet, um diese HTML -Seite als "CSS abgerundete Kanten oder Ecken" zu geben, um den Titel zu verleihen. Während wir uns das Körper -Tag dieses HTML -Skripts angesehen haben, fanden wir eine einzige Überschrift von Größe 1 mit einem einfachen Texttitel darin. Diese HTML -Seite enthält insgesamt 5 Absätze unter Verwendung von Absatz -Tags oder Elementen. Der erste Absatz zeigt, dass dies einen Grenzradius von 50 Pixel enthält und die Sonnenfinsternisform gebildet wird.
Der zweite Absatz verwendet nur eine ID "Eclipse". Alle anderen drei Absätze enthalten ihre eigenen festgelegten Klassen: vier, drei und zwei sowie einige Sätze, die die für die Erstellung verschiedener Sonnenfinsternisse für bestimmte Absätze verwendete Grenzwerte zeigen. Diese Absätze würden die Gesamtzahl der abgerundeten Ecken zeigen. Die ID „Eclipse“ für den ersten Absatz wurde verwendet, um den ersten Absatz in einer Sonnenfinsternis zu stylen. Wir haben den Grenzradius von 50%, den Hintergrund der gelben grünen Farbe, die Polsterung von 10 Pixel, die Breite von 110 Pixel und eine Höhe von 50 Pixel für den ersten Absatz angegeben. Dann haben wir die Klasse des dritten Absatzes „Four“ verwendet, um die vier Ecken des Absatzes zu rund. Dafür haben wir das Grundstück Rand Radius für die oberen, unten, linken und rechten Kanten des Absatzes verwendet. Wir haben den Hintergrund als Burlywood mit Polsterung von 15 Pixel, einer Breite von 200 Pixel und einer Höhe von 40 Pixel angegeben.
Dies bedeutet, dass alle vier Ecken oder Kanten des dritten Absatzes abgerundet würden. Damit der vierte Absatz von der Klasse „Drei“ bezeichnet werden soll, würden drei seiner Ecken oder Kanten abgerundet, während der eine unverändert bleibt. Der Hintergrund wurde als Gold angegeben, während die Polsterung, die Breite und die Höhe der gleiche sein würden, wie wir für den dritten Absatz verwendet haben. Wir haben die Klasse „zwei“ für den fünften Absatz verwendet, um ihre beiden Ecken umzurunden. Die gleiche Polsterung, Breite und Höhe würde verwendet, während die Farbe für diesen Absatz unterschiedlich wäre. Der erste Absatz würde keine abgerundeten Kanten anzeigen, da er kein Styling dafür enthält. Sparen wir dieses HTML.
Die Ausgabe dieses HTML -Programms hat gezeigt, dass der erste Absatz keine abgerundeten Kanten enthält, da wir das Styling dieses Absatzes verpasst haben. Auf der anderen Seite wurden alle vier Absätze gestylt und wir haben für alle diese abgerundeten Kanten erhalten.
Abschluss
Hier geht es um die Verwendung des Randradius -Eigentums, um die Ränder eines beliebigen HTML. Zu diesem Zweck haben wir die HTML -Beispiele auf eine sehr einfache und exquisite Weise verwendet. Mit dem ersten Beispiel haben wir die Verwendung der Randradius -Eigenschaft gezeigt, um alle Kanten eines Elements oder Bildes gleichzeitig zu umrunden, ohne die Kanten anzugeben. Auf der anderen Seite haben wir innerhalb des zweiten Beispiels die Verwendung verschiedener Ecken oder Kanten angegeben, um diese Kanten oder Ecken durch die Verwendung verschiedener Werte entsprechend zu runden.