Grenzen in CSS | Erklärt

Wenn wir eine Website besuchen, haben wir manchmal einige schöne Frames im Text gesehen, die die Benutzeroberfläche verbessern und die Interaktivität des Inhalts verbessern. In CSS werden diese Frames als Grenzen bezeichnet und spielen eine wichtige Rolle bei der Web -Designing. CSS bietet mehrere Grenzeigenschaften, mit denen wir den Stil, die Breite usw. des Randes festlegen können.

Diese Beschreibung bietet einen umfangreichen Überblick über die folgenden Grenzeigenschaften:

• Grenzstil: Wird verwendet, um den Stil des Randes wie gepunktet, solide usw. festzulegen.
• Randfarbe: Wird verwendet, um die Farbe des Randes wie rot, #00ff00 usw. einzustellen.
• Rahmenbreite: Wird verwendet, um die Breite des Randes wie dick, dünn, pixel usw. einzustellen.

In diesem Artikel wird erläutert, wie jeder der oben genannten Eigenschaften mit Hilfe von Beispielen verwendet wird.

CSS-Eigentum im Grenzstil

Eine Eigenschaft, die bestimmt, wie das Aussehen der Grenze. Die CSS-Eigenschaft im Grenzstil bietet die folgenden Werte:

• versteckt: Setzen Sie die versteckte Grenze.
• solide: Stellen Sie den durchgezogenen Linienrand ein.
• gepunktet: Geben Sie den gepunkteten Rand an.
• gestrichelt: Stellen Sie den gestrichelten Rand ein.
• doppelt: Stellen Sie die Doppelzeilenrandgrenze ein.
• Rille: bestimmt den 3D gerillten Rand.
• Grat: setzt 3d Ridge Grenze.
• Einsatz: Bestimmt 3D -Einsetztgrenze
• Anfang: Wird verwendet, um den 3D -Outset -Rand festzulegen

Notiz: Der 3D -Effekt von Rille, Kamm, Einschub und Beginn hängt vom Farbwert des Randes ab.

Beispiel Der folgende Code erstellt mehrere Absätze und implementiert alle oben genannten Werte, um die Auswirkungen der einzelnen Eigenschaften des CSS-Randstils anzuzeigen:

Html

Absatz mit versteckter Grenze

Absatz mit soliden Grenze

Absatz mit gepunkteter Grenze

Absatz mit gestrichelter Grenze

Absatz mit Doppelgrenze

Absatz mit Groove -Grenze

Absatz mit Ridge -Grenze

Absatz mit insetierter Grenze

Absatz mit Ofens -Grenze

CSS

.versteckt
Polsterung: 0;
Grenzstil: versteckt;

.solide-greife
Polsterung: 0;
Grenzstil: solide;

.dotiertes grenzüberschreitend
Polsterung: 0;
Grenzstil: gepunktet;

.gestrichelte
Polsterung: 0;
Grenzstil: gestrichelt;

.doppeltes grenzüberschreitend
Polsterung: 0;
Grenzstil: Doppel;

.Groove-Borre
Polsterung: 0;
Grenzstil: Groove;

.Ridge-Border
Polsterung: 0;
Grenzstil: Ridge;

.eingelassener
Polsterung: 0;
Grenzstil: Einschub;

.Outset-Borre
Polsterung: 0;
Grenzstil: Beginn;

Der obige Code generiert die folgende Ausgabe:

CSS Grenzfarben-Eigentum

Wie der Name selbst anzeigt, können wir die Farbe des Randes angeben. Die Farbe kann unter Verwendung vordefinierter Farbnamen, hexadezimalen Werten usw. angegeben werden. Die Farbe jeder Seite kann individuell unter Verwendung von Grenzboden-Farben, Grenztop-Farben, Grenz-Links-Farben und Grenz-Rechten-Farben-Eigenschaften modifiziert werden.

Beispiel Betrachten wir das untergegebene Stück Code, das die Grenzfarbe mithilfe von Hexadezimalcode angibt:

Html

Ein einfaches Beispiel für Grenzfarben.

CSS

P
Grenzstil: gestrichelt;
Grenzfarbe: #00f;

Der obige Code generiert den folgenden Code:

Erweitern wir den obigen Code ein wenig, um jede Randseite anders zu färben.

Html

Ein einfaches Beispiel für Grenzfarben.

CSS

P
Grenzstil: gestrichelt;
Border-Top-Color: #00f;
Grenzbodenfarbe: #f00;
Border-Links-Farben: #000;
Grenzrechtsfarbe: #0f0;

Wir erhalten die folgende Ausgabe:

CSS-Grenz-Breiten-Eigentum

Die Rand-Breiten-Eigenschaft wird verwendet, um die Breite der Grenze zu setzen. Die Randbreite Eigenschaft nimmt Werte entweder in Bezug auf Pixel oder einen vordefinierten Wert wie dick, dünn usw.

Beispiel Betrachten wir den folgenden Code, der die Randbreite als 2 Pixel angibt:

Html

Ein einfaches Beispiel für die randbreitende Breite.

CSS

P
Grenzstil: solide;
Randbreit: 2px;

Wir erhalten die folgende Ausgabe:

CSS Grenz-Radius-Eigentum

Die Rand-Radius-Eigenschaft gibt einen abgerundeten Rand für ein Element an, und die Länge bestimmt die Form seiner Ecken.

Beispiel Betrachten wir den folgenden Code, der den Grenzradius als 10 Pixel angibt:

Html

Ein einfaches Beispiel für Grenzradius.

CSS

P
Grenze: 2px fest;
Border-Radius: 10px;

Ausgang

Die Ausgabe überprüft, ob das Rand-Radius-Grundstück eine abgerundete Form für die Randecke bietet:

CSS -Grenzkurzanmeldung

CSS bietet eine Abkürzungseigenschaft für Grenzbreiten, Stil und Farbe, mit der wir alle diese Grenzeigenschaften in einer einzigen Linie implementieren können.

Beispiel

Im folgenden Code implementieren wir mehrere Eigenschaften in einer einzelnen CSS-Linie unter Verwendung einer Kurzeigeneigenschaft:

Html

Ein einfaches Beispiel für die Grenz -Kurzform -Immobilie.

CSS

P
Grenze: 3px fest blau;

Anstatt jede Grenzeigenschaft einzeln implementieren, implementiert der obige Code die Breite der Grenze,

Die Ausgabe hat überprüft, dass Shorthand -Eigentum alle drei Grenzeigenschaften erfolgreich implementiert hat.

Abschluss

CSS bietet Grenzbreiten-, Grenz- und Grenzfarbeigenschaften für die Festlegung von Grenzbreiten, Grenzstil und Grenzfarbe eines HTML-Elements. Dieses Schreiben bietet einen umfassenden Überblick über die CSS-Grenzen und erörtert, wie man einen Rand erstellt, die Grenzfarbe festlegt, den Stil des Randes verändert und die Grenzbreite mit Hilfe einfacher und leicht verständlicher Beispiele festlegt.