CSS -Umressradius

Meistens neigen wir dazu, das Umrisseignis von HTML mit seinem Grenzeigentum zu verwechseln. Während beide Eigenschaften voneinander sehr unterschiedlich sind. Das Grenzeigenschaften kann zusätzlichen Platz einnehmen. Der Umriss eines Elements kann nicht Platz einnehmen und kann sich auch mit anderen Elementen überlappen. Wir können die Seiten eines Umrisss für ein bestimmtes Element nicht einstellen. Wir können jedoch alle 4 Seiten einer Grenze getrennt einstellen. Außerdem können Sie die Größe oder Position des Elements mit Hilfe eines Umrisss nicht ändern. Der Umriss befindet sich immer an der Außenseite des Elements und der Rand wird als innere Seite des Elements verwendet. Wir werden die Verwendung von Umriss in HTML -Codes darstellen und den Radius überprüfen.

Beispiel # 01:

Beginnen wir mit der Verwendung von Grenzen in unserem Beispiel. Danach werden wir auf dem Umriss eine Gestalt aufnehmen. Mit der grundlegenden Syntax des Erstellens einer HTML -Datei haben wir die HTML-, Kopf-, Stil- und Body -Tags in diesem Programm von Visual Studio Code verwendet. Innerhalb des Body -Tags haben wir zwei Überschriften unter Verwendung von H1- und H2 -Größenüberschriften -Tags verwendet. Der H1 ist der größte verfügbar. Der H1 enthält ein einfaches 2-Wort-Grenzbeispiel ". Während der H2 einen langen Satz enthält. Innerhalb des Style -Tags des "Kopf" -Tags haben wir die „H2“ -Keuchte mit einem blauen Farbrand von 3 Pixel hinzugefügt. Sparen wir diesen Code und führen Sie ihn im Google Chrome -Browser aus.

Nachdem wir diesen HTML -Code des Visual Studio -Code in jedem Browser ausgeführt haben, haben wir unten die Ergebnisse gezeigt. Die erste Überschrift wurde als einfache Überschrift ohne Styling genommen. Während die zweite Überschrift mit dem blauen Farbrand von 3 Pixel um sie herum angezeigt wurde.

Fügen wir eine Grenze hinzu und skizzieren beide gleichzeitig auf jeder Überschrift, um den Unterschied zu erkennen. Wir haben das Styling für die H2 -Überschrift wie gezeigt verwendet. Wir haben eine zusätzliche Linie im Styling von H1 zur Erstellung der Umriss hinzugefügt. Diese Umrisse befindet sich in grüner Farbe und gepunktete Format. Jede seiner Punkte werden 5 Pixel wie angegeben sein. Der Rand ist bereits als 2 Pixel fest blau definiert. Lassen Sie uns diesen HTML -Code von Visual Studio speichern und debuggen und ihn im Browser ausführen.

Die Ausgabe des obigen HTML. Die blaue Farbe um die Überschrift „H2“ zeigt den festen Rand, während die grüne gepunktete Linie der Größe 5 Pixel den Umriss von Heading 2 veranschaulicht. Jetzt können Sie den Unterschied sehen.

Beispiel # 02:

Der Umriss kann ebenso solide sein, genau wie der Grenze. Nehmen wir an einem weiteren Beispiel einen Gestalt, um einen neuen soliden Umriss zu erstellen. Wir haben also dieselbe Datei mit einem kleinen Unterschied zum obigen Code verwendet. In dieser HTML -Datei haben wir die gleiche H1 -Überschrift mit Größe 1 verwendet, und ein DIV -Tag wurde verwendet, um einen neuen Abschnitt innerhalb derselben HTML -Seite zu erstellen. Sie können mehr als 1 Element innerhalb des Abschnitts „Div“ hinzufügen. Im Moment haben wir die einfache Textzeile hinzugefügt, um das "Div" -Tag "zu skizzieren" umzusetzen. Innerhalb des Style -Tags dieser HTML. Wir verwenden die SUCLINE -Eigenschaft, um 3 Pixel zu skizzieren. Diese Übersicht ist solide ohne Striche oder Punkte. Seine Farbe wird "gelbgrün" sein, wie im Stilbereich angegeben. Der Wert „3px“ wurde verwendet, um die Länge eines Umrisses anzugeben- wie dick oder dünn. Sparen wir diesen Code und führen Sie ihn im Browser aus, um die Ergebnisse zu sehen.

Der gelbgrüne Farbumriss der Größe 3 Pixel wurde um die Außenseite des Elements „Div“ erzeugt. Es sieht den Grenzen sehr ähnlich, obwohl seine Richtung immer nach außen ist.

In allen oben genannten Beispielen haben wir die Erstellung eines soliden Randes, einer soliden Umriss und einer gepunkteten Umrisse in der HTML -Datei behandelt. Jetzt werden wir einen gestrichenen Umriss um das HTML -Element erstellen. Wir haben versucht, das gleiche HTML -Skript bisher im Visual Studio -Code zu verwenden. Eine einzelne Änderung, die wir im Style -Tag vorgenommen haben. Außerdem haben wir die Farbe für den Umriss in „Blue-Violett“ verändert. Sparen wir einfach dieses von HTML aktualisierte Skript und führen Sie es aus.

Nach dem erfolgreichen Debuggen dieses HTML -Code im Visual Studio -Code wurde er innerhalb des Chrome -Browsers ausgeführt, und wir haben die folgende Ausgabe unten. Der blau-violette gestrichelte Umriss wurde um den Abschnitt „Div“ dieser HTML-statischen Seite erzeugt.

Beispiel # 03:

Schauen wir uns den Radius eines Umrisss im HTML -Skript an. Wie wir bereits im Einführungsabsatz besprochen haben, können wir die Werte für jede Seite der Umrisse nicht getrennt angeben, wie wir es für die Grenzen tun können. In derselben HTML -Datei haben wir also das Körper- und Stil -Tag nach Bedarf aktualisiert. Wir haben insgesamt 1 Heading -Tag "H1", 4 "Div" -Tags und 3 "P" -Pernen -Tags verwendet.

Die Überschrift ist von der größten Größe („Umrissbeispiel“), während alle 4 „Div“ -Tags 4 angegebene Klassen „A“, „B“, „C“ und „D“ für die Erstellung von 4 Abschnitten innerhalb des Gleiche HTML -Seite. Die Absätze wurden nur aus Gründen des Stylings leer gelassen. Dies ist für das "Körper" -Tag. Mit den spezifischen Klassen jedes „DIV“. Es wird eine gestrichelte Blau-Violette-Umriss für den Abschnitt 1. und 3. Divs und einen "gepunkteten" Blau-Violett-Umriss für das 2. und 4. "Div" -Tag erzeugen. Alle diese Umrisse haben die gleiche Breite, "4px". Wir haben die Eigenschaft „-moz-outline-radius“ von Umrissen verwendet, um Werte für jede Seite der Umrisse separat festzulegen. Wir haben den Radius der linken Seite für Div 1, links/rechts für Div 2, links/rechts/Oberseite für Div 3 und alle 4 Seiten für Div 4 gesetzt. Die Breite, der Rand und die Polsterung für alle 4 „Div“ -Abschnitte waren gleich. Testen wir das Ergebnis für diesen Code jetzt.

Nach der Ausführung dieses HTML-Code haben wir die gleichen 4-Pixel-Umrisse für alle Abschnitt. Die Verwendung der Radius -Eigenschaft beeinflusst die Ausgabe nicht, während die Breite mithilfe der „Breite“ des Abschnitts „Div“ aktualisiert wurde.

Abschluss:

Der einführende Absatz wurde verwendet, um den klaren Unterschied zwischen der Grenzeigenschaft und der Umrisseigenschaft des CSS -Stylings in HTML zu demonstrieren. In den Beispielen, die wir in dieser Artikel -Implementierung verwendet haben, haben wir im Vergleich zu den Grenzen zusammen mit ihren Unterschieden verschiedene Arten von Umrissen erstellt. Außerdem haben wir das Beispiel diskutiert, um zu zeigen, dass der Radius eines Umrisss nicht geändert werden kann, und es hängt völlig von der Grenze des Elements ab, um ihn hervorzuheben, und es kann sich auch überlappen.