CSS abgerundete Eckknöpfe

In diesem Beitrag werden wir uns die Eigenschaften des CSS -Stils ansehen, um den Rand eines Radius abzurunden. Das Border-Radius-Eigentum liegt unser Hauptaugenmerk in diesem Artikel. Der Wert des Rand-Radius-Eigentums gibt dem rechteckigen Rand eine Umwandlung, die je nach Wert etwas rund ist. Diese Style -Eigenschaft von CSS kann auch in vier Portionen unterteilt werden, die für alle Ecken des Randes gelten und verwendet werden können, um verschiedene Werte auf sie einzustellen.

Beispiel 01: Verwenden Sie das CSS -Style -Tag in einer HTML -Datei, um eine abgerundete Ecke zu erstellen

In diesem Beispiel werden wir den CSS -Style -Tag -Ansatz verwenden, um eine abgerundete Eckschaltfläche in einer HTML -Datei zu erstellen. Das Standard -Taste -Element der Hypertext -Markup -Sprache wird in diesem Beispiel in eine Taste mit Farbe und runden Rändern umgebaut. Schauen wir uns das Skript an, das wir erstellen werden, um diese Aufgabe zu erledigen:

Im angegebenen Skript öffnen wir unseren Dateikopfzeile. Im Dateikopf definieren wir das Styling des Schaltflächenelements. Dafür öffnen wir ein Style -Tag und rufen die Button -Klasse an, in der wir die verschiedenen Styling -Eigenschaften definieren. Die erste Eigenschaft wäre der Grenzradius des Knopfes, der einen Rand für den Knopf mit runden Ecken erzeugt. Anschließend fügen wir die Farbe dem Hintergrund der Schaltfläche mit der Eigenschaft Hintergrundfarbe hinzu. Danach definieren wir die Breite und Höhe des Knopfes in Pixeln und schließen dann die Stil- und Kopf -Tags. Jetzt öffnen wir das Body -Tag und geben mit Hilfe des H1 -Tags einen Übergang zur Seite. Dann öffnen wir das Schaltflächen -Tag und rufen die Schaltflächenklasse im Tag auf. Dies wird alle Styling -Eigenschaften erben, die im Style -Tag definiert sind. Danach schließen wir alle Tags und speichern die Datei, um sie in unserem Browser zu öffnen.

In der vorherigen Ausgabe können wir feststellen, dass die Taste aufgrund des CSS -Stylings, das wir in der Taste -Klasse angegeben haben, abgerundete Ecken enthält. Jetzt verändern wir das Rand-Radius-Eigentum und beobachten die Änderung in der Grenze des Knopfes.

Jetzt erhöhen wir die Pixellänge des Radius des Randes im vorherigen Skript und nehmen keine anderen Änderungen vor. Nach dem Speichern und Öffnen dieser Datei erhalten wir die folgende Ausgabe:

Wir können sehen, dass die Taste in der angegebenen Ausgabe vollständig runde Enden hat und sich von der vorherigen Version unterscheid.

Beispiel 02: Verwenden von Inline -CSS, um einen Knopf mit abgerundeten Ecken zu erstellen

In diesem Beispiel wird der Inline -CSS. In diesem Beispiel werden wir das Styling in das Button -Tag hinzufügen, wie im folgenden Snippet gezeigt:

Im angegebenen Skript starten wir unseren Code aus dem Body -Tag, da in diesem Szenario der Dateiheader nicht verwendet wird. Im Body -Tag fügen wir der Seite zuerst eine Überschrift hinzu, indem wir das H1 -Tag öffnen und dann mit dem Schaltflächen -Tag fortfahren. In diesem Tag schreiben wir die Styling -Eigenschaften mit dem Keyword "Style" CSS -Keyword "". Zwischen den umgekehrten Kommas werden die Eigenschaften zugewiesen, durch Semikolonen getrennt. Die erste Eigenschaft ist der Grenzradius und sein Wert lautet "10px". Dann weisen wir die Farbe des Hintergrunds zu und weisen die Höhe und Breite der Taste zu. Danach schließen wir die Schaltfläche und die Körper Tags, um die Datei zu beenden. Und dann speichern Sie es in der “.HTML -Dateiformat, damit wir es in unserem Browser öffnen können.

Die Ausgabe zeigt, dass wir die Standard -Taste transformiert haben, indem wir ihm mit dem Inline -CSS in der Taste des Taste einen runden randgrenzen und weißen Hintergrund gegeben haben.

Beispiel 03: Verwenden der verschiedenen Eigenschaften, die sich auf den Randradius in CSS auf einer Taste beziehen

In diesem Beispiel werden wir die verschiedenen Eigenschaften verwenden, die sich auf den Grenzradius beziehen, den das CSS bezüglich der Positionierungsperspektive bietet. Wir werden diese verschiedenen Eigenschaften diskutieren und sie im folgenden Skript für eine HTML -Datei implementieren:

Im vorherigen Skript fügen wir vier verschiedene Eigenschaften hinsichtlich des Radius des Randes hinzu, die die obere linke, oben rechts, unten links und unten rechts sind. Alle diese Eigenschaften repräsentieren die vier Seiten des Randes und des CSS des Knopfes, ermöglicht es uns, alle Seite des Randes getrennt zu bearbeiten. Wir weisen also die linke Seite des Randes der Knopf mit ähnlichen Radiuswerten und die rechte Seite des Randes der Taste mit ähnlichen Radiuswerten zu. Dadurch werden zwei verschiedene Randformen auf beiden Seiten des Randes des Knopfes erzeugt. Anschließend fügen wir dem Hintergrund der Taste auch eine Farbe hinzu und weisen eine feste Breite und Höhe für das Schaltflächenelement zu. Danach geben wir der Seite eine Überschrift in das Body -Tag und erstellen auch eine Schaltfläche im Körper -Tag. Das Schaltflächen -Tag erbt die Style -Tag -Klasse, die alle unterschiedlichen Styling -Eigenschaften zum Erstellen einer einzigartigen Form für den Rand der Taste enthält.

Nach dem Öffnen der vorherigen Skriptdatei in unserem Browser erhalten wir das angegebene Ergebnis. Wie wir sehen können, hat der Knopf auf beiden Seiten zwei verschiedene Arten des Randes. Dies geschah, weil wir die verschiedenen Werte des Radius des Randes für beide Seiten des Tastens zugewiesen haben.

Beispiel 04: Verwenden Sie CSS, um die Grenzwunden einer Taste zu ändern, wenn sie schwebt

In diesem Beispiel werden wir den Rand der Taste ändern, wenn sie überlagert wird. Der Style Tag CSS -Ansatz wird folgen, um einen Schwebeffekt auf die Schaltfläche zu erstellen. In diesem Beispiel werden wir eine separate Klasse und eine bestimmte Funktion erstellen, die auch für diese Klasse vererbt werden soll.

In diesem Skript erstellen wir eine Stylingklasse im Dateiheader für das Schaltflächenelement. Anschließend erstellen wir eine neue Eigenschaftsfunktion für diese Klasse mit dem Namen "Hover". In dieser Funktion setzen wir den Radius der Grenze auf „10px“, was zu einer Animation des Übergangs der Grenze zu einer runden kantigen Grenze führt. Jetzt schließen wir den Header des Tags, nachdem wir alle stylingbezogenen Eigenschaften abgeschlossen haben. Im Body -Tag erstellen wir eine Überschrift mit dem H1 -Tag und öffnen auch ein Schaltflächen -Tag. In diesem Schaltfläche verwenden wir die Schaltflächenklasse über den Header der Datei, um alle Formatierungseigenschaften zu erben. Nach dem Speichern der Datei öffnen wir sie in unserem Browser.

Die Ausgabe zeigt den Nachverfolgungseffekt auf die Taste, wie er in der Styling-Klasse und seiner Funktion definiert wurde.

Abschluss

In diesem Artikel haben wir die verschiedenen Ansätze besprochen, um eine Schaltfläche mit abgerundeten Ecken mit den verschiedenen CSS -Stilen zu erstellen, die das Inline -CSS und das Style Tag CSS sind. Wir beobachteten die verschiedenen Eigenschaften, die mit diesem Phänomen in diesem Artikel zusammenhängen. Und implementierte diese Variationen im Notepad ++, um ein besseres Verständnis dieses Konzepts zu verstehen.