CSS -Taste Rand

In diesem Artikel werden wir diskutieren, wie man einen Knopf mit CSS stylen, indem wir ihm einen Grenze geben. Die Standardtaste, die wir normalerweise in eine HTML -Datei erhalten, ist ein weißes Feld ohne Grenze. Ein Text darin und ist nicht sehr ansprechend. Wir verwenden das CSS-Styling auf der Taste, um es auf Augenhöhe zu gestalten und es mit dem Rest der Seite zu mischen. Wir werden uns in diesem Artikel auf den Rand einer Schaltfläche im CSS -Styling konzentrieren und mehrere Beispiele implementieren.

Beispiel 01: Verwenden Sie CSS, um einer Schaltfläche einen soliden Rand in einer HTML -Datei zu geben

In diesem Beispiel werden wir ein Style -Tag -CSS verwenden, um eine Schaltfläche in einer HTML -Datei zu ändern. Wir werden der Standard -Taste einen soliden Rand hinzufügen, der keine Grenze hat, um ihn vom Hintergrund und dem Rest der Seite hervorzuheben.

Wir haben das Style -Tag geöffnet und einen Knopfparameter für das Styling gestartet. Darin gaben wir der Schaltfläche eine Hintergrundfarbe mit HTML -Referenzcode an. Dann gaben wir dem Knopf einen Rand, indem wir ihn als Schlüsselwort geschrieben haben und ihm drei Eigenschaften gaben: die Größe des Randes des Knopfes, den Zustand des Randes und dann die Farbe des Randes. Dann gaben wir im Stil der Schaltfläche etwas Polsterung, Textausrichtung und Anzeigeeigenschaften, um die Schaltfläche an den Browser und sichtbarer zu machen.

Dann schlossen wir den Stil und das Kopfetik. In diesem Tag haben wir unserer HTML -Seite eine Überschrift mit dem H1 -Tag gegeben und dann das Schaltflächen -Tag geöffnet. Danach schließen wir beide Tags und speichern dieses Skript im „“.HTML ”-Format, um es in unserem Browser zu öffnen.

Nachdem wir das Skript in unserem Browser ausgeführt haben, erhalten wir die oben genannte Ausgabe. Die obige Ausgabe zeigt, dass die Schaltfläche den Stil enthält, genau wie wir im Style -Tag im Header der Datei angegeben haben.

Beispiel 02: Verwenden Sie CSS, um einer Taste in einer HTML -Datei einen gepunkteten Rand zu geben

In diesem Beispiel werden wir der Standardtaste, die keinen Rand hat, einen gepunkteten Rand hinzufügen, um ihn vom Hintergrund und dem Rest der Seite zu unterscheiden. Das Skript wird in Notepad ++ entwickelt und verwendet ein CSS -Style -Tag, um eine Schaltfläche in einer HTML -Datei zu ändern.

Wir haben das Style -Tag geöffnet und begannen, den Button -Parameter anzupassen. Wir haben den HTML -Referenzcode verwendet, um die Schaltflächenhintergrundfarbe anzugeben. Dann gaben wir dem Knopf einen Rand, indem wir ihn als Schlüsselwort geschrieben und drei Eigenschaften gegeben haben: „4px“, die die Größe des Randes hat; "Dotiert", was die Form der Grenze ist; und "schwarz", was die Farbe des Randes ist.

Anschließend haben wir der Schaltfläche Polsterung, Textausrichtung, Anzeigeeinstellungen und Schriftgröße hinzuge. Die Stil- und Kopf -Tags wurden dann geschlossen. Als nächstes kommt das Body -Tag. Wir haben das H1 -Tag verwendet, um unserer HTML -Seite eine Überschrift bereitzustellen, und dann das Schaltflächen -Tag im Body -Tag geöffnet. Wir haben einen Text geschrieben, der auf der Schaltfläche in diesem Tag angezeigt wird. Danach schließen wir beide Tags und speichern dieses Skript in “.HTML ”-Format, damit wir es auf unserem Browser ausführen können.

Wir erhalten die oben genannte Ausgabe, nachdem wir das Skript in unserem Browser ausgeführt haben. Der Snippet zeigt, dass die Schaltfläche einen schwarz gepunkteten Rand hat, wie im Style -Tag im Header der Datei definiert.

Beispiel 03: Verwenden Sie CSS, um einer Taste einen soliden runden Rand in einer HTML-Datei zu geben

In diesem Beispiel werden wir CSS -Style -Tags verwenden, um das Erscheinungsbild einer Schaltfläche in einer HTML -Datei zu ändern. Wir werden einen soliden Rand mit runden Ecken und etwas Farbe erstellen, um die Standard -Taste vom Vordergrund und den Rest der Seite zu unterscheiden.

Wir haben das Style -Tag im obigen Skript geöffnet und begannen, einen Schaltflächenparameter im Header der HTML -Datei zu ändern. Dann gaben wir dem Knopf einen Rand, indem wir ihn als Schlüsselwort geschrieben und drei Eigenschaften zugewiesen haben: „4px“, die die Größe des Randes ist; "Fest", was die Form des Randes ist; und "Schwarz", die die Farbe des Randes ist. Dann fügten wir ein weiteres Grenzeigentum namens Border-Radius hinzu und sein Wert wird in Pixeln zugewiesen, um die Grenzkanten umzurunden. Wir haben dann den Stil- und Kopf -Tags geschlossen, bevor wir uns mit dem Body -Tag weiterentwickeln. Wir haben einen Text zwischen den Schaltflächen -Tags geschrieben, die auf der Schaltfläche angezeigt werden.

Wie die obige Ausgabe zeigt, hat der Rand der Taste abgerundete Kanten und das gesamte andere Styling, das wir im Header der Datei definiert haben.

Beispiel 04: Verwenden von Inline -CSS, um einer Schaltfläche in einer HTML -Datei einen Rand hinzuzufügen

In diesem Beispiel werden wir das Inline -CSS -Styling auf einer Schaltfläche verwenden, um ihm einen Rand in einer HTML -Datei zu geben. Das gesamte Styling, das auf der Taste durchgeführt wird.

Im obigen Skript werden wir das gesamte Styling im Körper der Datei durchführen. Zunächst öffnen wir das H1 -Tag, um die Seite zu begleiten. Dann öffnen wir das Button -Tag. In diesem Tag werden wir den Stil der Schaltfläche definieren. Wir werden den Stil mit dem Border -Schlüsselwort einleiten und ihm unterschiedliche Eigenschaften wie Größe, Form, Farbe, Polsterung und Ausrichtung geben. Danach haben wir das Tag geschlossen und den Text geschrieben, der auf der Schaltfläche angezeigt wird. Dann haben wir alle Tags geschlossen und diese Datei ausgeführt, um die folgende Ausgabe zu erhalten:

Wie wir in der Ausgabe sehen können, enthält die Schaltfläche das gesamte Styling, das wir im Button -Tag bereitgestellt haben, und wir haben eine Taste mit Inline -CSS erfolgreich hinzugefügt.

Beispiel 05: Verwenden Sie CSS, um einer Taste in einer HTML -Datei einen Doppelrand zu geben

In diesem Beispiel werden wir einer Taste einen Doppelrand hinzufügen. Das Skript wird in Notepad ++ entwickelt und verwendet eine CSS -Style -Tag -Methode, um eine Schaltfläche in einer HTML -Datei zu ändern.

Wir haben das Style -Tag geöffnet und begannen, ein Knopfelement in der Header der HTML -Datei zu verändern. Der Rand wurde dann zur Schaltfläche hinzugefügt, indem er als Schlüsselwort geschrieben und drei Eigenschaften zugewiesen wurde: "10px", die Größe des Randes; "Doppelte", die Form des Randes; und "schwarz", die Farbe des Randes.

Die Schaltfläche enthält alle Stile aus dem Style -Tag und wir haben einen Rand erfolgreich auf eine Taste mit CSS angewendet.

Abschluss

In diesem Artikel haben wir den Rand einer Schaltfläche mit CSS in einer HTML -Datei besprochen. Die Standard -Taste eines Browsers hat normalerweise kein Styling und ist nur ein einfaches weißes Quadrat. Wir verwenden also CSS, um dieses Element zu stylen und es an die HTML -Seite anpassbar zu machen. In diesem Artikel haben wir verschiedene Beispiele erörtert, in denen wir mit unterschiedlichen Ansätzen einen Rand zu einer Taste hinzugefügt haben, und all diese Beispiele wurden in Notepad implementiert++.