Randoptionen. Rahmen in CSS erstellen. Grundstücksgrenze. CSS-Randbreitensyntax

Vlad Merzhevich

Der Effekt einer dreidimensionalen Tabelle wird durch die gleichzeitige Verwendung heller und dunkler Farben im Rahmen oder in den Zellen erreicht, wodurch die Illusion entsteht, dass die Tabelle über den Hintergrund der Webseite hinausragt. Beispielsweise wird der Rahmen um einen Tisch standardmäßig als 3D gerendert. Obwohl diese Art von Frames bei Webdesignern nicht sehr beliebt ist, heißt das nicht, dass solche Frames überhaupt nicht verwendet werden sollten. Mithilfe von Stilen kann der Tisch unterschiedlichste, auch dreidimensionale, Optiken erhalten, die sich erfolgreich von den „flachen“ Vorbildern abheben.

Die Dicke des 3D-Rahmens wird durch das Rand-Tag-Attribut gesteuert

Um die angegebene Tabelle zu erstellen, nehmen wir alles heraus mögliche Parameter in Stilen und das Hinzufügen eines Rahmens wird dem Rahmenattribut zugewiesen (Beispiel 1).

Beispiel 1: Verwendung des border-Attributs

In diesem Beispiel ist der Rand um die Tabelle zwei Pixel dick und sein Aussehen kann je nach Größe der Tabelle leicht variieren. verschiedene Browser.

Mit Stilen können Sie auch einen dreidimensionalen Tabelleneffekt erstellen, indem Sie die universelle Stileigenschaft „Rahmen“ verwenden. Die Werte geben den Linienstil und seine Stärke an, die das endgültige Erscheinungsbild der Tabelle stark beeinflussen. In der Tabelle 1 zeigt einige Werte und das Endergebnis.

Beispiel 2 verwendet einen Stil mit dem Wert „Groove“ und einer Dicke von 5 Pixeln, um einen Rahmen hinzuzufügen. Die resultierende Tabelle ist in Abb. dargestellt. 2.

Die Eigenschaft „Rahmenstil“ wird auf den TABLE-Selektor angewendet, um einen Rahmen um die Tabelle zu erstellen, und auf die TD- und TH-Selektoren, um jeder Zelle einen Rahmen hinzuzufügen. Um doppelte Linien dort zu vermeiden, wo sich verschiedene Zellen berühren, wird die Eigenschaft „border-collapse“ mit dem Wert „collapse“ verwendet (Beispiel 2).

Beispiel 2: Erstellen Sie einen Rahmen mithilfe von Stilen

In diesem Beispiel wird ein vertiefter grauer Rand um die Zellen und die Tabelle als Ganzes erstellt.

Wir selbst können den Effekt einer dreidimensionalen Tabelle erzeugen, indem wir in ihren Reihen dunkle und helle Linien richtig abwechseln (Abb. 3).

Diese Abbildung zeigt, dass die geraden Zeilen der Tabelle einen hellen Hintergrund, eine weiße horizontale Linie unten und eine dunkelgraue Linie oben haben. Man kann es jedoch auch andersherum interpretieren und sagen, dass die ungeraden Linien oben eine weiße Linie und unten eine dunkle Linie haben.

Um das in Abb. gezeigte zu erstellen. 3 Tabellen, lassen Sie uns eine zusätzliche Klasse namens even einführen und sie zu den geraden Zeilen der Tabelle hinzufügen. Gleichzeitig können Sie die Border-Eigenschaft für den TR-Selektor nicht direkt festlegen; in diesem Fall wird die Linie einfach nicht angezeigt. Daher werden wir Kontextselektoren verwenden und die .even TD-Konstruktion hinzufügen, die besagt, dass wir für alle Zellen, die sich innerhalb eines Elements mit der geraden Klasse befinden, eine Linie darunter und darüber setzen. Die Hintergrundfarbe kann mithilfe der Hintergrundeigenschaft auf den TR-Selektor angewendet werden, wie in Beispiel 3 gezeigt.

Beispiel 3: Tabellenzeilen auswählen

Wenn die untere Reihe der Tabelle gerade ist und deren Hintergrund im Stil in einer hellen Farbe gehalten ist, dann ist am unteren Rand der Tabelle ein heller Streifen zu sehen. Sie können mit seiner Präsenz leben oder eine neue Stilklasse ohne Endergebnis erstellen und sie auf diese Linie anwenden.

Wird verwendet, um einen gezeichneten Rahmen um ein Element anzuzeigen. Die Dicke des Rahmens wird durch die Eigenschaft border festgelegt. Wenn border: 0 angegeben ist, wird der Rahmen nicht angezeigt. Bei anderen Randwerten hat das Bild immer Vorrang. Der Hintergrund wird, sofern über die Eigenschaft „Hintergrund“ festgelegt, unterhalb des Rahmens angezeigt.

Syntax

Randbild: keines | [<адрес> [<число> | <проценты>]{1,4} ? ] && {0,2}

Bezeichnungen

Werte

none Zeigt keinen gezeichneten Rahmen an, es wird der eingestellte Rahmenstil verwendet.<адрес>Pfad zur Grafikdatei. Erforderlicher Parameter.

Das Bild selbst zum Erstellen des Rahmens ist in Abb. dargestellt. 1 und besteht aus neun Bereichen: vier Ecken, der oberen, rechten, unteren, linken Seite und dem zentralen Teil, in dem der Inhalt des Elements angezeigt wird.

Reis. 1. Bild, um einen Rahmen zu erstellen

<число>

Ein, zwei, drei oder vier Werte, die die Größe von Bildteilen in Pixeln angeben und so die Teilungsbereiche definieren. Die Einheiten selbst werden nicht geschrieben, sondern nur die Zahl (10, nicht 10px). In Abb. 2 rote Linien markieren die Bereiche, die zum Erstellen des Rahmens erforderlich sind.

Reis. 2. Aufteilen des Originalbildes in Bereiche

Sie können einen, zwei, drei oder vier Werte verwenden, getrennt durch ein Leerzeichen. Der Effekt hängt von der Anzahl der Werte ab und ist in der Tabelle dargestellt. 1.

Der Einfluss dieser Parameter auf das Rahmenbild ist in Abb. dargestellt. 3.

		runden

Reis. 3. Ergebnis der Verwendung von Dehnungs-, Wiederholungs- und Rundungsparametern

Beispiel

Das Ergebnis des Beispiels ist in Abb. dargestellt. 4.

Reis. 4. Rahmenansicht

Objektmodell

Ein Objekt.style.borderImage

Notiz

Firefox vor Version 15.0 unterstützt die Eigenschaft -moz-border-image.

Safari vor Version 6.0, Chrome vor Version 15.0 und Android vor Version 4.4 unterstützen die Eigenschaft -webkit-border-image.

Opera bis Version 15.0 unterstützt die Eigenschaft -o-border-image.

Spezifikation

Jede Spezifikation durchläuft mehrere Genehmigungsstufen.

• Empfehlung – Die Spezifikation wurde vom W3C genehmigt und wird als Standard empfohlen.
• Kandidatenempfehlung ( Mögliche Empfehlung) – Die für den Standard verantwortliche Gruppe ist davon überzeugt, dass sie ihre Ziele erreicht, benötigt jedoch Hilfe von der Entwicklungsgemeinschaft, um den Standard umzusetzen.
• Vorgeschlagene Empfehlung Vorgeschlagene Empfehlung) – zu diesem Zeitpunkt wird das Dokument dem W3C-Beirat zur endgültigen Genehmigung vorgelegt.
• Arbeitsentwurf – Eine ausgereiftere Version eines Entwurfs, der zur Überprüfung durch die Community diskutiert und geändert wurde.
• Entwurf des Herausgebers ( Redaktioneller Entwurf) – eine Entwurfsversion des Standards, nachdem von den Projektredakteuren Änderungen vorgenommen wurden.
• Entwurf ( Entwurf einer Spezifikation) – die erste Entwurfsversion des Standards.

Border-image ist eine Eigenschaft, die Sie festlegen können Hintergrundbild für den Elementrahmen. Die Eigenschaft füllt einen Rahmen mit einem bestimmten Bild und verteilt Teile des Bildes so, dass sich die Eckteile in den Ecken des Rahmens befinden und die Zwischenräume zwischen ihnen mit dem Rest des Bildes gefüllt werden.

Diese Eigenschaft macht es einfach, unglaubliche Dinge zu tun, für die zuvor 3 bis 8 Bilder und die Bearbeitung von Markierungen erforderlich waren.

Aktualisierung: Firefox funktioniert ab Version 29.

Die Größe des Bildes entspricht der Dicke des Rahmens. Rahmenfarbe und -stil werden ignoriert.

Wenn Sie nur border-image-source angeben, füllt das Bild die Ecken aus, ohne zu wissen, was als Nächstes zu tun ist:

Rand: 80 Pixel durchgehend transparent; Rahmenbild: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Rand-Bild-Slice

Eine wichtige Eigenschaft, die die Größe des Bildausschnitts bestimmt, der die Ecken des Rahmens ausfüllt. Die verbleibenden Teile werden verwendet, um den Raum zwischen den Ecken gemäß dem in border-image-repeat angegebenen Algorithmus zu füllen.

Mögliche Werte:

<проценты>- berechnet relativ zur Bildgröße. Horizontal relativ zur Breite, vertikal - relativ zur Höhe.<числа>- Pixel (z Bitmap) oder Koordinaten (für Vektor). Maßeinheiten werden nicht angegeben. füllen - Stichwort, ergänzt die vorherigen Werte. Wenn angegeben, wird das Bild nicht durch die Innenkante des Rahmens abgeschnitten, sondern füllt auch den Bereich innerhalb des Rahmens aus. Sehr nützlich für abgerundete Rahmen.

Um Werte für jede Seite zu definieren, können mehrere Werte durch ein Leerzeichen getrennt angegeben werden.

Die Summe der Werte der gegenüberliegenden Seiten muss kleiner als die Bildgröße sein, sonst gibt es nichts, was den Raum zwischen den Ecken ausfüllt.

Rand: 80 Pixel durchgehend transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); Randbild-Slice: 100;

Randbildwiederholung

Die Eigenschaft bestimmt, wie die Lücken zwischen den Ecken gefüllt werden.

Mögliche Werte: stretch – streckt den Füllbereich des Bildes. Standardwert; wiederholen – wiederholt den Füllabschnitt, während die Verbindungen mit dem Eckbild sichtbar sind; rund – füllt die Lücke zwischen den Ecken. In der Mitte der Seite kann eine Naht sichtbar sein. Die vorsichtigste Aktion. Leerzeichen – verhält sich ähnlich wie wiederholen. Ich konnte keinen Unterschied feststellen.

Sie können zwei Werte gleichzeitig festlegen. Der erste ist für das Verhalten des Bildes im oberen und unteren Rahmen verantwortlich, der zweite für den linken und rechten.

Randbild: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); Randbild-Slice: 100; border-image-repeat: wiederholen;

Links ist der Rapport, rechts ist rund.

Wenn der Rahmen komplex ist und die Seiten nicht gut zusammenpassen, funktioniert Stretch besser, hier ein Beispiel.

Randbildbreite

Randbildbreite

Die Eigenschaft steuert die Breite des sichtbaren Teils des Rahmens und skaliert ihn. Wenn dieser Wert größer als border-width ist, kriecht das Rahmenbild unter den Inhalt, auch wenn die Eigenschaft fill nicht festgelegt ist.

Mögliche Werte:<длина>- Werte in px oder em;<%>- Prozentwerte relativ zur Bildgröße;<числа>– numerischer Wert, mit dem border-width auto multipliziert wird – Schlüsselwort. Falls angegeben, entspricht der Wert dem entsprechenden border-image-slice . Wenn keine geeignete Größe vorhanden ist, wird der Wert für die Randbreite verwendet und das Bild füllt die gesamte Ecke des Rahmens aus und kriecht unter den Inhalt. Es funktioniert etwas seltsam.

Rand: 60 Pixel durchgehend transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); Randbild-Slice: 80; Randbildwiederholung: rund; Randbildbreite: 160px;

Rechts ist ein Rahmen mit border-image-width . Das Beispiel links zeigt, wie das Bild an den Innenrändern des Rahmens beschnitten wurde. Aufgrund der vergrößerten Breite ist der rechte Frame unter den Inhalt gekrochen.

Rand-Bild-Anfang

Eine interessante Eigenschaft, die es Ihnen ermöglicht, den Rahmen außerhalb des Elements zu verschieben. Negative Werte werden nicht unterstützt.

Mögliche Werte:<длина>- Werte in px oder em;<числа>– der numerische Wert, mit dem border-width multipliziert wird.

Rand: 60 Pixel durchgehend transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); Randbild-Slice: 120; Randbildwiederholung: rund; Randbildanfang: 60px 10px 50px 120px;

Rechts sehen Sie ein Beispiel mit border-image-outset . Diese Eigenschaft hat keinen Einfluss auf die Größe des Elements und der Rahmen kann benachbarte Elemente überlappen.

Rahmen sind die Linien, die ein Element umgeben (den Inhalt, den es enthält, und den Abstand darum herum). Ein Beispiel, auf das wir bereits gestoßen sind, sind Zellrahmen innerhalb einer Tabelle.

CSS bietet zwei Arten von Rahmen: innere Ränder und äußere Linien. Die für die Gestaltung von Frames verantwortlichen CSS-Eigenschaften beginnen mit dem Wort „border“, was mit „Frame“, „Rand“ übersetzt werden kann. Das Vorhandensein und Format der äußeren Gliederung wird durch Eigenschaften festgelegt, die mit dem Wort „outline“ beginnen. Im Gegensatz zum Rand hat der Umriss keinen Einfluss auf die Breite und Position des gerahmten Blocks. Darüber hinaus ist eine einseitige Montage nicht möglich Grenze- nur von allen Seiten gleichzeitig.

Lassen Sie uns zunächst über die Randgestaltung sprechen, dann geht es weiter Gliederung.

Rahmenbreite

Legt die Rahmenbreite fest. Es ist klar, dass das Element standardmäßig an vier Seiten von Rahmen umgeben ist. Mit dieser Eigenschaft können Sie die Breite der Ränder entweder für alle Seiten gleich oder für jede Seite unterschiedlich festlegen. Abhängig davon, welche Breite welchen Rändern zugewiesen werden soll, können Sie in der Regel einen bis vier Werte angeben.

Sie können die Breite entweder mit den üblichen Pixeln, Prozentsätzen und anderen CSS-Längeneinheiten oder mit reservierten Wörtern festlegen dünn(2px), Mittel(4px) und dick(6px).

Rahmenbreite: 16px 12px 4px 8px;

Border-Stil

Definiert den Rahmenstil. Beachten Sie, dass Sie diese Regel nicht festlegen, sondern die Eigenschaft angeben Rahmenbreite, dann gibt es überhaupt keine Rahmen. Wenn Sie also sichtbare Ränder wünschen, geben Sie dies unbedingt an Border-Stil.

Eine Eigenschaft kann eine ganze Reihe von Werten haben, alle werden in der folgenden Abbildung deutlich dargestellt.

Der letzte Absatz zeigt, dass der Stil, ebenso wie die Dicke, des Rahmens auf jeder Seite unterschiedlich sein kann:

Randstil: einfarbig, doppelt gepunktet, keine

Randfarbe

Funktioniert genauso wie die vorherigen Eigenschaften, ist jedoch für die Farbe der Ränder verantwortlich. Sie können den Wert auch auf einen bis vier Werte einstellen und kennen dann bereits das Ergebnis. Wenn die Regel nicht gesetzt ist, haben die Rahmen die Textfarbe des aktuellen Elements oder, wenn dies nicht angegeben ist, die Textfarbe des übergeordneten Elements.

Randfarbe: #C85EFA;

Grenze

Erleichtert das Schreiben und spart Code, indem Sie alle aufgelisteten Eigenschaften für Ränder auf allen Seiten eines Elements in einer Zeile festlegen können:

P (Rand: 2 Pixel durchgehend grün;)

Um unterschiedliche Regeln für Rahmen auf verschiedenen Seiten festzulegen, können Sie die folgenden Werte verwenden:

• Rand-oben- Höchstgrenze.
• Rand-rechts- Rechts.
• Rand unten- untere.
• Rand-links- links.

P (Rand links: 6px gepunktet gelb;)

Umrissbreite

Gleich wie Rahmenbreite, nur für den Außenrahmen, nicht für den Innenrahmen. Legt die Dicke des Umrisses auf die gleichen Werte wie fest Rahmenbreite. Zusätzlich zur Dicke des Elementrahmens müssen Sie dessen Stil angeben, andernfalls ist kein Umriss vorhanden.

Umrissstil

Eigenschaftswerte duplizieren Werte Border-Stil. Die Regel gibt den Stil der Außenkontur an.

Beschreibung

Legt den Rahmenstil um ein Element fest. Es ist zulässig, individuelle Stile für verschiedene Seiten eines Elements festzulegen.

Syntax

Rahmenstil: (1,4) | erben

Werte

Für die Eigenschaft „border-style“ werden mehrere Werte bereitgestellt, um das Erscheinungsbild des Rahmens zu steuern. Das Aussehen hängt vom verwendeten Browser und der eingestellten Rahmenstärke ab. In der Tabelle 1 zeigt die Namen der Stile und den daraus resultierenden Rahmen unterschiedliche Bedeutungen Dicken - 1, 3, 5 und 7 Pixel.

Zusätzlich zu den in der Tabelle aufgeführten Werten werden die folgenden Schlüsselwörter verwendet.

Keine Zeigt den Rand nicht an und seine Dicke (Rahmenbreite) wird auf Null gesetzt. versteckt Hat die gleiche Wirkung wie „none“, außer dass „border-style“ auf Tabellenzellen angewendet wird, deren Eigenschaft „border-collapse“ auf „collapse“ gesetzt ist. In diesem Fall wird der Rand um die Zelle überhaupt nicht angezeigt. inherit Erbt den Wert des übergeordneten Elements.

Sie können einen, zwei, drei oder vier Werte verwenden, getrennt durch ein Leerzeichen. Die Wirkung ist mengenabhängig und in der Tabelle angegeben. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut laacret dolore magna aliguam erat volutpat.

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1.

Reis. 1. Anwenden der Eigenschaft border-style

Objektmodell

document.getElementById("elementID").style.borderStyle

Browser

Browser Internet Explorer Bis einschließlich der sechsten Version wird es bei einer Randstärke von 1 Pixel gepunktet als gestrichelt dargestellt. Bei einer Dicke von 2 Pixeln und höher funktioniert der Punktwert korrekt. Dieser Fehler wurde in IE7 behoben, jedoch nur für alle 1-Pixel-Ränder. Wenn einer der Blockränder eine Dicke von 2 Pixel oder mehr hat, wird in IE7 der gepunktete Wert in einen gestrichelten Wert umgewandelt.

Internet Explorer-Versionen bis einschließlich 7.0 unterstützen keine versteckten und erblichen Werte.

Der Rahmenstil kann je nach Browser leicht variieren, wenn die Werte „Groove“, „Ridge“, „Inset“ oder „Outset“ verwendet werden.