CSS-Rahmen und -Umrisse sind wertvolle Werkzeuge für Webdesigner, die einer Website Flair verleihen möchten. Sie sind einfach zu bedienen, sobald Sie wissen, wie sie funktionieren, und vielseitig genug, um eine Vielzahl von Anforderungen zu erfüllen. Schauen wir uns die CSS-Grenzen an, um zu sehen, wo Sie anfangen sollten.

Was ist der Unterschied zwischen einem Rahmen und einer Gliederung in CSS?

CSS-Konturen und -Rahmen bilden zwei der äußeren Schichten von das CSS-Box-Modell, sitzt zwischen Rändern und Rändern. Obwohl diese Eigenschaften ähnlich sind, haben sie unterschiedliche Werte und Zwecke.

Zum einen befinden sich CSS-Konturen außerhalb von Grenzen. Das bedeutet, dass sie sich mit Inhalten außerhalb des Elements überschneiden können, auf das Sie sie anwenden. Außerdem ändern CSS-Rahmen die Abmessungen eines Elements, Konturen jedoch nicht.

Wenn Sie Schwierigkeiten haben, Rahmen- und Umrissstile zu visualisieren, können Sie Ihre verwenden Browser-Entwicklungstools zum Debuggen ihnen.

instagram viewer

CSS Border & Outline Shared Property-Werte

Trotz ihrer Unterschiede teilen CSS-Rahmen und -Umrisse einige ihrer Werte. Die Abkürzung, die Sie für jede verwenden, ist ebenfalls sehr ähnlich.

CSS Border & Outline Shorthand

Wie bei anderen komplexen CSS-Eigenschaften stehen sowohl Rahmen als auch Umrisse in Kurzform zur Verfügung. Beide Eigenschaften haben dasselbe Format für ihre Kurzschriftoptionen und es sieht so aus.

Grenze: BreiteStilFarbe;
Umriss: BreiteStilFarbe;

Dadurch werden Regeln erstellt, die wie folgt aussehen, wenn sie in Aktion sind. Allerdings deckt diese Kurzschrift natürlich nicht alle Werte ab, die für diese Eigenschaften verfügbar sind.

Rand: 10px durchgehend blau;
Umriss: 20px durchgehend rot;

Diese abgekürzten CSS-Rand- und Umrissregeln führen zu einem dünnen blauen Rand mit einem dicken roten Umriss.

Wie bei anderen abgekürzten CSS-Eigenschaften können Sie auch einzelne Eigenschaften verwenden, um die gleichen Ergebnisse zu erzielen.

CSS-Rahmenbreite und Umrissbreite

Rahmen- und Umrissbreiten sind optionale CSS-Eigenschaftswerte, die die Dicke der von Ihnen verwendeten Rahmen und Umrisse festlegen. Das Format für diese Eigenschaften ist dasselbe.

Umrissbreite: 20px;
Rahmenbreite: 10px;

Rahmen ermöglichen die Einstellung individueller Breiten für jede Seite des Elements, Konturen jedoch nicht. Mehr dazu können Sie in den folgenden Abschnitten nachlesen.

CSS-Rahmenstil und Umrissstil

CSS-Rahmen und -Konturen gibt es in einer Vielzahl von Stilen. Einfarbige Umrandungen sind am gebräuchlichsten, aber Sie können mit der Art und Weise, wie Sie Umrandungen und Umrisse verwenden, kreativ werden.

Rahmenstil: solide;
Gliederungsstil: gepunktet;

Eine vollständige Liste der verschiedenen CSS-Rahmen- und Gliederungsstile finden Sie am Ende dieses Artikels.

CSS-Rahmenfarbe und Umrissfarbe

Wie bei anderen farbbasierten CSS-Eigenschaften akzeptieren Rahmen und Umrisse alle für CSS zulässigen Farben. Dazu gehören Hex-Codes, RGB-Codes, Kurzschriftfarben und mehr.

Rahmenfarbe: blau;
Outline-Farbe: #ff0000;

Sie können auch Farbverläufe verwenden, wenn Sie mit CSS-Rahmen und -Konturen arbeiten.

CSS-Rahmeneigenschaftswerte

Neben ihren gemeinsamen Eigenschaftswerten haben Grenzen und Umrisse auch einzigartige Werte, die es zu erkunden gilt. CSS-Grenzen haben zwei einzigartige Eigenschaften, die es wert sind, gelernt zu werden.

CSS-Grenzradius

Das Hinzufügen eines Radius zum Rand eines Elements gibt Ihnen viel Kontrolle über seine Form. Jede Ecke eines Elements kann einen anderen Radius haben, und diese Eigenschaft kann auch dann gesetzt werden, wenn border-style auf none gesetzt ist.

Randradius: 20px;

Sie können einen einzelnen Wert festlegen, um den Radius aller Ecken zu ändern.

Sie können die Ecken auch in Gruppen oben links/unten rechts und oben rechts/unten links aufteilen.

Randradius: 10px 20px;

Dies macht es einfach, interessante Formen mit Ihren HTML-Elementen zu erstellen.

Schließlich können Sie für jede Ecke einen eigenen Radius festlegen.

Randradius: 10px 20px 30px 40px;

Diese Werte gelten im Uhrzeigersinn beginnend von der oberen linken Ecke.

Eigenschaften der CSS-Randseite

Im Gegensatz zu Konturen können Sie jede Seite eines Rahmens so einstellen, dass sie für viele ihrer Eigenschaften einen eindeutigen Wert hat. Dadurch ist es möglich, jeder Seite Ihres Elements eine andere Breite zu geben.

linke Randbreite: 10px;
rechte Randbreite: 20px;
Rahmenbreite oben: 30px;
Randbreite unten: 40px;

Sie können auch unabhängige CSS-Rahmenstile für jede Seite eines Elements festlegen.

border-left-style: fest;
border-right-style: gepunktet;
border-top-style: gestrichelt;
Border-Bottom-Style: doppelt;

Und Sie können die Farbe jeder Seite ändern, wenn Sie möchten.

border-left-style: blau;
border-right-style: #ff0000;
Border-Top-Stil: #00ff00;
Border-bottom-style: rgb (0, 0, 255);

CSS-Randseiten funktionieren mit der regulären Kurzschrift, um sie so zu kombinieren.

Rand links: 10 Pixel durchgehend blau;
Rand rechts: 20px gepunktet #00ff00;
Rand oben: 30px gestrichelt #ff0000;
Rand unten: 40px doppeltrgb(0, 0, 255);

CSS-Gliederungseigenschaftswerte

Wie CSS-Rahmen haben Umrisse eine eigene einzigartige Eigenschaft; Outline-Offset.

CSS-Umriss-Offset

Das Hinzufügen eines Versatzes zu einem Umriss erzeugt einen Abstand zwischen sich selbst und dem Hauptelement. Dieser Versatz muss für jede Seite des Umrisses gleich sein, und die Eigenschaft akzeptiert nur einen Wert.

Outline-Offset: 10px;

Dies kann eine nette Möglichkeit sein, einen dritten Rahmen für Ihre Elemente zu verwenden, der zu Ihrer Hintergrundfarbe passt.

CSS-Rahmen- und Umrissstile

Sowohl Rahmen als auch Umrisse brauchen einen Stil, um zu funktionieren. Es stehen zehn verfügbare Stile zur Auswahl, einschließlich Rändern, die überhaupt nicht angezeigt werden.

Rahmenstil: solide;
Rahmenstil: gepunktet;
Rahmenstil: gestrichelt;
Grenzstil: Groove;
Bordürenstil: Grat;
Border-Stil: doppelt;
Rahmenstil: Einfügung;
Border-Stil: Anfang;
Rahmenstil: versteckt;
Rahmenstil: keiner;

Rahmen haben dieselben Stile wie Umrisse, nur dass der Umrissstil als Eigenschaft festgelegt ist.

So verwenden Sie CSS-Rahmen und -Konturen

Umrisse und Rahmen sind großartige Designwerkzeuge für Website-Ersteller. Sie können das Erscheinungsbild Ihrer Website mit diesen CSS-Eigenschaften definieren, aber Sie müssen kreativ werden.