CSS-Doppelrahmen. Wie erstelle ich einen doppelten Rahmen in CSS? Elementrand mit Doppellinie
Herzliche Grüße an alle Leser der aktuellen Publikation. Heute erkläre ich Ihnen, wie Sie mit CSS-Tools einen doppelten Rahmen erstellen. Sie werden mit Eigenschaften wie Rahmen und Umriss und deren Funktion vertraut gemacht.
Nachdem Sie diesen Artikel gelesen haben, werden Sie Ihr Wissensarsenal mit neuen interessanten Tricks zum Erstellen von Schatten um Ränder herum auffüllen und die Technologie zum Erstellen von Rahmen bestehend aus beherrschen verschiedene Farben. Darüber hinaus möchte ich auf das Thema Pseudoelemente eingehen, die die Layoutmöglichkeiten in Websprachen und CSS deutlich erweitern. Nun, kommen wir zur Sache!
Grenze und ihre Fähigkeiten
Ich beginne mit der bekannten Grenzeigenschaft. Es wird häufig in verwendet Programmcode, und in meinem frühere Veröffentlichungen Ich habe es mehr als einmal indirekt angesprochen. Diese Eigenschaft ist universell und sehr flexibel.
Zusätzlich zu dem Standardzweck wird der Rahmen verwendet, um Überschriften zu unterstreichen oder Wichtiges hervorzuheben Textinformationen unter allen Inhalten, wie zum Beispiel der Abteilung vertikale Linie Grammatikregeln.
Natürlich „spielt“ jeder Entwickler nach eigenem Ermessen mit vorhandenen Elementen von Websprachen, sodass es viele Anwendungsfälle geben kann.
Border bietet die Möglichkeit, den Stil, die Dicke und die Farbe von Rändern sowohl für alle Seiten gleichzeitig als auch für einen bestimmten Bereich zu definieren. Fügen Sie dazu den Namen der Seite mit einem Bindestrich an den Wortrand an. Zum Beispiel „border-bottom“.
Der Rahmenstil kann völlig unterschiedlich sein:
- gestrichelt
- gepunktet
- solide
- doppelt
- volumetrische Linien (Nut, Anfang, Grat, Einschub).
Überblick und seine Fähigkeiten
Der Zweck von „Umriss“ ist mit dem der vorherigen Eigenschaft identisch, er dient jedoch dazu, den äußeren Rand eines Elements zu definieren. Wenn Sie also Werte für zwei beschriebene Elemente von Stiltabellen gleichzeitig festlegen, umrahmt der Rahmen das Objekt in einem Rahmen und der Umriss befindet sich um den Rahmen herum.
Und doch gibt es noch andere Unterschiede. Somit hat der Umriss keinen Einfluss auf die Position des Objekts unter anderen Inhalten und ändert nicht seine Dicke, was über die vorherige Eigenschaft nicht gesagt werden kann.
Darüber hinaus bietet dieses CSS-Element nicht viel Flexibilität. Die vom Layouter angegebenen Werte gelten für alle Seiten des Außenrahmens und es ist nicht möglich, nur mit einer Seite zu arbeiten.
Wie bei border können Sie mit der aktuellen Eigenschaft verschiedene Stile für Rahmen festlegen. Darüber hinaus sind ihre Namen dieselben wie im vorherigen CSS-Element.
Was sind Pseudoelemente und wofür können sie nützlich sein?
In diesem Kapitel möchte ich es Ihnen erzählen Neues Material. Bei manchen Projekten ist es einfach unmöglich, auf Kenntnisse in diesem Thema zu verzichten.
Daher werden Pseudoelemente benötigt, um den Bereich von Elementen zu formatieren, für den es im Dokumentbaum keine Selektoren oder Definitionen gibt.
Nicht mit Pseudoklassen verwechseln. Diese wiederum formatieren vorhandene Selektoren und Elemente.
IN moderne Regeln Pseudoelemente werden mit einem Doppelpunkt (:after) definiert. Wenn Sie jedoch einfach „:“ verwenden, überspringt der Validator den Code und gibt keinen Fehler aus.
Heute gibt es viele Pseudoelemente. Die beliebtesten habe ich in der folgenden Tabelle aufgelistet.
Ich möchte auf eine gewisse Besonderheit bei der Verwendung der ersten beiden Pseudoelemente hinweisen: Sie interagieren immer mit der Eigenschaft, in der der Text selbst geschrieben ist – dem Inhalt.
Praktischer Teil
Oben habe ich dir das Wesentliche erklärt theoretisches Material Und wenn Sie es vollständig gelesen haben, werden Sie mit dem Beispiel keine Schwierigkeiten haben.
Nachfolgend habe ich den Code des Programms angehängt, in dem ich, wie versprochen, Objekte mit zweifarbigem Rahmen implementiert habe. Einigen davon habe ich auch Schatten hinzugefügt.
Ich möchte Sie daran erinnern, dass dies mithilfe einer Eigenschaft wie umgesetzt werden kann Box Schatten. Sie können dafür bis zu fünf Werte angeben, die jeweils für die horizontale Verschiebung, die vertikale Verschiebung, den Unschärferadius, die Schattendehnung und ihre Farbe verantwortlich sind.
| 1 2 |
Hoffnung dieser Veröffentlichung war für Sie nützlich. Ich würde mich sehr freuen, Sie unter meinen Abonnenten zu sehen. Teilen Sie den Link zu meinem Blog mit Ihren Freunden. Viel Erfolg!
Mit Respekt, Roman
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 In Abb. 1 zeigt die Namen der Stile und den resultierenden Rahmen für verschiedene Dickenwerte – 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 es den Rahmenstil auf Tabellenzellen anwendet, deren Wert Border-Collapse-Eigenschaften zum Zusammenbruch bereit. 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.
Ergebnis dieses Beispiel 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.
Eigentum CSS – « Grenze"ermöglicht es Ihnen, die Dicke, Farbe und Art der Umfangslinie um das Element festzulegen. Die Parameter dieser Eigenschaft können in einer Zeile, durch ein Leerzeichen getrennt, und in beliebiger Reihenfolge geschrieben werden.
- - Linienstärke ein Pixel
- - durchgezogene Linie
- - weiße Farbe
- - schwarze Farbe
- - graue Farbe
Solider Elementrand
Rahmen des Strichelements
Gepunkteter Elementrand
Elementrand mit Doppellinie
Eigentum einzelner Grenzabschnitte
Gepresster, gerillter Rahmen im Volumen
Konvex gewellter Rahmen im Volumen
Volumetrisch gepresster Rahmen
Volumetrischer konvexer Rahmen
Lektionen / CSS /
Lektion 7: CSS-Elementrahmen
Fast jede Website verwendet eine Eigenschaft, die einen Rahmen um ein Element erstellt. Es wird entweder für Schaltflächen oder für Blöcke mit Text benötigt. Um einen Rahmen zu erstellen, verfügt ein Element in CSS über zwei Eigenschaften: Rahmen und Umriss. Schauen wir sie uns an.
Grenze
Diese Eigenschaft wird benötigt, um einen Rahmen um ein Element zu setzen; sie gibt seinen Rand in einem Webdokument an; die Breite des Rahmens wird bei der Positionierung des Elements berücksichtigt. Es hat drei Bedeutungen: Farbe, Dicke und Rahmentyp.
Die Syntax für die Eigenschaft border lautet wie folgt:
Rand: Breite Typfarbe;
Sie können eine andere Reihenfolge für die Angabe von Eigenschaftswerten wählen, die Hauptsache ist jedoch die Verwendung eines Leerzeichens.
Die Dicke (Breite) des Rahmens muss in Pixel (px) oder Prozent (%) angegeben werden.
Die Farbe kann entweder im RGB-Format (Rot Grün Blau) oder im HTML-HEX-Code angegeben werden.
Unten sind ARTEN VON LINIEN mit ihren Namen:
Wie legt man Grenzen für ein Element fest? Wir machen es wie folgt:
#Block (
border:3px solid #0085ss; /* Setze die Linie auf 3 Pixel dick und blau */
}
Wenn Sie eins, zwei, drei installieren möchten Rahmen auf einer bestimmten Seite, dann geben wir es so an:
Rand-oben- Rahmen oben;
Rand unten— Rahmen unten;
Rand-links- Rahmen links;
Rand-rechts- Rahmen rechts;
Block (
border-right: 3px solid #0085cc;
border-bottom: 2px gestrichelt #0085cc;
}
Wenn Sie wollen Rahmen entfernen Element in CSS, dann schreiben Sie in die Border-Eigenschaft - none
Leer (
Grenze: keine; /* Ein Element mit leerer Klasse hat keinen Rand */
}
Gliederung
Outline ist eine Eigenschaft, die benötigt wird, um den äußeren Rand eines Elements festzulegen.
Essen zwei Unterschiede zur Grenze:
Erstens hat die im Umriss angegebene Linie KEINEN Einfluss auf die Position des Blocks selbst, seine Breite und Höhe.
Zweitens besteht keine Möglichkeit, einen Rahmen auf einer bestimmten Seite zu installieren.
Die Syntax ist die gleiche wie bei border.
Umriss: 2px gepunktet #0085cc; /* Rahmen 2 Pixel blau gepunktet */
Sowohl für den Umriss als auch für den Rand können Sie Rahmen entfernen, indem Sie „none“ schreiben:
Vielen Dank für Ihre Aufmerksamkeit!
Vorheriger Artikel
Lektion 6.
Elementgrenzen.
Auffüllung und Ränder in CSS. Was sind Rand und Polsterung? Nächster Artikel
Lektion 8. Wie stelle ich die Textfarbe und den Hintergrund eines Elements in CSS ein?
Kommentare zum Artikel (vk.com)
Grenze
Browserunterstützung
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Beschreibung
Mit der CSS-Eigenschaft können Sie gleichzeitig die Breite, den Stil und die Farbe des Blockrands festlegen. Ein Blockrand ist eine regelmäßige Linie/ein regelmäßiger Rahmen, der den Block von allen Seiten umgibt. Es ist zu bedenken, dass sich das Hinzufügen eines Rahmens auf die Gesamtgröße des Blocks auswirkt.
Die Werte werden durch ein Leerzeichen getrennt und können in beliebiger Reihenfolge erscheinen, der Browser bestimmt selbst, welcher übereinstimmt den erforderlichen Parameter. Es ist nicht erforderlich, alle drei Werte anzugeben; die Breite und/oder die Farbe können weggelassen werden. In diesem Fall wird anstelle des fehlenden Werts der standardmäßig für die Eigenschaft festgelegte Wert verwendet, d. h. Wenn beispielsweise die Breite nicht angegeben ist, wird der Standardwert der Eigenschaft verwendet. Die unter der Syntax befindliche Tabelle gibt an, welche Werte der Eigenschaften verwendet werden können.
Hinweis: Um Ränder nur auf bestimmten Seiten eines Elements festzulegen, verwenden Sie die folgenden Eigenschaften: border-top, border-bottom, border-left, border-right.
Tipp: Wenn Sie einen Rahmen verwenden, müssen Sie normalerweise eine Polsterung hinzufügen.
CSS-Eigenschaft: border
Sie fügen Leerraum zwischen dem Blockrahmen und seinem Inhalt hinzu: Text, Bilder oder untergeordnete Tags. Normalerweise wird der Rahmen nahe am Inhalt des Elements gezeichnet. Dies ist nur dann sinnvoll, wenn Sie einen Rahmen um das Bild festlegen müssen.
Syntax
border: border-width border-style border-color|inherit;
Immobilienwerte
Beispiel
Hier gibt es Text.
Das Ergebnis dieses Beispiels im Browserfenster:
So legen Sie Farbe, Stil und Größe des Rahmens in Feldern fest.
In Auszeichnungssprachen ist border( Grenze), haben nur Tabellen, Bilder und Rahmen, in manchen Fällen ist es möglich, die Farbe des Rahmens festzulegen und das ist alles.
Randattribut
Cascading Style Sheets geben uns Weitere Möglichkeiten, Aber das Wichtigste zuerst.
In CSS können wir die Breite des Rahmens steuern mit Rahmenbreite Genauer gesagt können wir die Dicke jeder Seite separat steuern:
Rand-oben-Breite- Dicke des oberen Randes
Rand-Rechts-Breite— Dicke des rechten Randes
Rand-Boden-Breite- Dicke des unteren Randes
Rand-Links-Breite— Dicke des linken Bordsteins
Es kann aber auch eine Kurzform geben:
P(border-width:oben rechts unten links;)(oben rechts unten links).
Die Randbreite kann eingestellt werden:
in Zahlen DIV(border-width:5px), von Null bis Unendlich, d. h. positiv.
dünn— dünner Rand, DIV(border-width:thin)
Mittel- mittlerer Rand, DIV(border-width:medium)
dick- dicker Rand, DIV(border-width:dick)
Die Zahlen sind klar, aber bei diesen Werten hängt alles vom Browser ab, aber trotzdem dünn<= medium <= thick
.
Wir können auch die Farbe des Randes steuern Randfarbe oder genauer gesagt, die Farbe jeder Seite:
Rand-Top-Farbe obere Randfarbe;
Rand-rechte-Farbe rechte Randfarbe;
Rand-unten-Farbe untere Randfarbe;
Rand-Links-Farbe Randfarbe auf der linken Seite.
Der Farbwert wird wie folgt eingestellt Farbe, d.h. eine von 16 Farben: Aqua, Schwarz, Blau, Fuchsia, Grau, Grün, Limette, Kastanienbraun, Marineblau, Oliv, Lila, Rot, Silber, Blaugrün, Weiß oder Gelb, Sie können auch Farben festlegen: Farbe:#000000, Farbe:#AF0 , Farbe: RGB (255,0,0) oder Farbe: RGB (100 %, 0 %, 0 %).
Unabhängig davon, welches Farbschema Sie wählen, wird es von Browsern trotzdem konvertiert Farbe: RGB (255,0,0). Zum Beispiel Farbe: Limette = Farbe:#00ff00 = Farbe:#0F0 = Farbe: RGB (0 %, 100 %, 0 %), aber für den Browser ist es egal Farbe: RGB (0,255,0), d.h. Dieser Wert wird berechnet.
Wenn die Dicke und Farbe des Rahmens durch HTML gesteuert werden kann, dann ist der Stil( Border-Stil) Nur CSS!!!
Der Stil kann auf jeder Seite separat gesteuert werden:
Border-Top-Stil oberer Randstil;
Rand-Rechts-Stil rechter Randstil;
Rand-unten-Stil unterer Randstil;
Rand-Links-Stil Randstil auf der linken Seite.
Schauen wir uns nun die Stilwerte an:
1)Rahmenstil: keiner– Dies ist der Standardwert, ähnlich wie border-width:0.
2)Rahmenstil: versteckt- Das Gleiche, außer den Tabellen, die wir uns später ansehen werden.
3)Rahmenstil:gepunktet– Ein Rand aus Punkten.
4)Rahmenstil: gestrichelt— Umrandung aus einer gepunkteten Linie.
5)Rahmenstil:solid— Ein Rand aus einer durchgezogenen Linie, d. h. wie in HTML.
6)Rahmenstil:doppelt— Ein Rahmen aus einer doppelten durchgezogenen Linie, hier benötigen Sie eine Rahmenbreite von mindestens 3 Pixeln.
7)Rahmenstil:Groove— Der Rand sieht aus, als wäre er aus Leinwand geschnitten.
8)border-style:ridge— Der Rand sieht aus, als würde er über die Leinwand hinausragen.
9)border-style:inset— Die ganze Schachtel sieht aus, als wäre sie in die Leinwand gepresst.
10)border-style:outset- Das Gegenteil des vorherigen.
Einige Browser ignorieren möglicherweise die Werte: gepunktet, gestrichelt, doppelt, Nut, Grat, Einschub und Anfang und zeigen sie als durchgezogen an, d. h. eine gewöhnliche Grenze.
Das ist natürlich alles wahr, aber alle oben genannten Beispiele beziehen sich nur auf das Funktionsprinzip, nicht auf den Mechanismus.
Regeleigenschaft Grenze impliziert (border: size style color;), diese Regel ist erfüllt, wenn alle drei Werte vorhanden sind und beispielsweise nur in dieser Reihenfolge H1( Rand: 5px doppelt rot;), es kann jedoch Ausnahmen geben, wenn diese Werte von Auszeichnungssprachen bereitgestellt werden, beispielsweise für eine Tabelle TABELLE (Rand: 2 Pixel), d.h. Es ist nur ein Wert angegeben.
Um nicht die gesamte Grenze, sondern jeden Teil einzeln zu verwalten, gibt es Regeln:
(Rand oben: Größe, Stil, Farbe;) Kontrolle des oberen Bordsteins;
(Rand rechts: Größe, Stilfarbe;) Bordsteinkontrolle rechts;
(Rand unten: Größe, Stil, Farbe;) Kontrolle der unteren Bordsteinkante;
(Rand links: Größe, Stil, Farbe;) Linke Bordsteinkontrolle.
Diese Regeln können einzeln oder alle zusammen verwendet werden.
Die Ausnahme ist diese Regel:
H1(
Rand: 4 Pixel durchgehend grün;
}
Die Sache ist, dass in CSS die letzte Regel die höchste Priorität hat. In diesem Fall enthält die Eigenschaft „border“ border-left und daher wird die Regel „border-left“ ignoriert, korrekterweise so:
H1(
Rand: 4 Pixel durchgehend grün;
Rand links: 2px doppelt rot;
}
Zuerst legen wir Regeln für die gesamte Grenze fest, dann für einzelne Abschnitte.
Ich habe alles für Rahmen für Elemente, außer dass wir uns einige Eigenschaften ansehen, wenn wir zu Tabellen und anderen Ausnahmen kommen.
CSS: Rand. Elementgrenzen.
CSS3-Rahmen
CSS3-Rahmen
Mit CSS3 können Sie abgerundete Ränder erstellen, Containern Schatten hinzufügen und ein Bild als Rahmen verwenden – ohne ein Designprogramm wie Photoshop zu verwenden.
In dieser Lektion lernen Sie die folgenden Eigenschaften eines Rahmens kennen:
- Grenzradius
- Box Schatten
- Randbild
Browserunterstützung
| Eigentum | Browserunterstützung |
|---|---|
| Grenzradius | |
| Box Schatten | |
| Randbild |
Internet Explorer 9 unterstützt einige der neuen Rahmeneigenschaften.
Firefox erfordert das Präfix -moz- für das Randbild.
Chrome und Safari erfordern das Präfix -webkit- für border-image.
Opera benötigt das Präfix -o- für border-image.
Safari erfordert außerdem das Präfix -webkit- für Box-Shadow.
Opera unterstützt neue Randeigenschaften.
Abgerundete CSS3-Ecken
Das Hinzufügen abgerundeter Ecken in CSS2 war schwierig. Wir mussten für jeden Winkel ein anderes Bild verwenden.
In CSS3 ist das Erstellen abgerundeter Ecken einfach.
In CSS3 wird die Eigenschaft border-radius verwendet, um abgerundete Ecken zu erstellen:
Dieser Block hat abgerundete Ecken!
CSS3-Containerschatten
In CSS3 wird die Eigenschaft box-shadow verwendet, um Containern einen Schatten hinzuzufügen:
CSS3-Randbild
Über die CSS3-Eigenschaft „border-image“ können Sie ein Bild verwenden, um einen Rahmen zu erstellen:
Mit der Eigenschaft border-image können Sie einen Bildrand angeben!
Das Originalbild, das zum Erstellen des Rahmens verwendet wurde, gehört Ihnen:
Neue Randeigenschaften
Randattribut
Randattribut, Etikett
