<line-style>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der <line-style>
[Aufzählungs]-Wertetyp (/de/docs/Glossary/enumerated) repräsentiert Schlüsselwortwerte, die den Stil einer Linie oder das Fehlen einer Linie definieren. Die <line-style>
Schlüsselwortwerte werden in den folgenden Lang- und Kurzform [border]-und (Spalten) Eigenschaften verwendet:
border
,border-style
border-block
,border-block-style
border-block-end
,border-block-end-style
border-block-start
,border-block-start-style
border-bottom
,border-bottom-style
border-inline
,border-inline-style
border-inline-end
,border-inline-end-style
border-inline-start
,border-inline-start-style
border-left
,border-left-style
border-right
,border-right-style
border-top
,border-top-style
column-rule
,column-rule-style
Syntax
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Werte
Der <line-style>
Aufzählungswertetyp wird durch einen der unten aufgeführten Werte angegeben:
none
-
Zeigt keine Linie an. Der berechnete Wert der Breite der Linie ist
0
, selbst wenn ein Breitenwert angegeben ist. Im Falle von Tabellenzellen und dem Zusammenfall von Rändern hat der Wertnone
die niedrigste Priorität. Wenn ein anderer, widersprüchlicher Rahmen gesetzt ist, wird dieser angezeigt. Der Wertnone
ähnelthidden
. -
Zeigt keine Linie an. Die berechnete Breite der Linie ist
0
, selbst wenn ein Breitenwert angegeben ist. Im Falle von Tabellenzellen und dem Zusammenfallen von Rändern hat der Werthidden
die höchste Priorität. Wenn ein anderer, widersprüchlicher Rahmen gesetzt ist, wird dieser nicht angezeigt. Der Werthidden
ähneltnone
, aberhidden
ist kein gültiger Wert für Umrissstile. dotted
-
Zeigt eine Reihe von runden Punkten an. Der Radius der Punkte beträgt die Hälfte des berechneten Wertes der Breite der Linie. Der Abstand der Punkte ist nicht durch die Spezifikation definiert und implementationsspezifisch.
dashed
-
Zeigt eine Reihe von kurzen, quadratisch beendeten Strichen oder Liniensegmenten an. Die genaue Größe und Länge der Segmente ist nicht durch die Spezifikation definiert und implementationsspezifisch.
solid
-
Zeigt eine einzige, durchgehende, solide Linie an.
double
-
Zeigt zwei durchgehende Linien mit etwas Abstand zwischen ihnen an. Die Länge der Linien summiert sich auf die durch die Breite der Linie definierte Pixelgröße.
groove
-
Zeigt einen Rand mit einem eingeschnittenen Aussehen an. Dieser Wert ist das Gegenstück zu
ridge
. ridge
-
Zeigt einen Rand mit einem erhabenen Aussehen an. Dieser Wert ist das Gegenstück zu
groove
. inset
-
Zeigt einen Rand an, der das Element eingebettet erscheinen lässt. Dieser Wert ist das Gegenstück zu
outset
. Wenn dieser Wert auf eine Tabellenzellen-Grenze angewendet wird undborder-collapse
aufcollapsed
gesetzt ist, verhält sich dieser Wert wiegroove
. outset
-
Zeigt eine Umrandung an, die das Element geprägt erscheinen lässt. Dieser Wert ist das Gegenstück zu
inset
. Wenn er auf eine Tabellenzelle mitborder-collapse
aufcollapsed
gesetzt angewendet wird, verhält sich dieser Wert wieridge
.
Hinweis:
Wenn <outline-style>
als Wertetyp für die outline
- und outline-style
-Eigenschaften verwendet wird, ist es ähnlich wie <line-style>
, unterstützt jedoch nicht hidden
und enthält den Wert auto
. Wenn auto
festgelegt ist, wird der user-agent
-definierte <line-style>
-Wert verwendet.
Beispiele
Das erste Beispiel zeigt alle <line-style>
Schlüsselwortwerte. Das zweite Beispiel zeigt, wie einige Linienstilfarben auf unerwartete Weise angezeigt werden können.
Festlegen von Linienstilen
Dieses Beispiel zeigt alle <line-style>
Werte als Werte für die CSS-border-style
- und column-rule-style
-Eigenschaften.
HTML
Dieses Beispiel verwendet mehrere <div>
-Elemente, von denen jedes eine Klasse hat, die den demonstrierten <line-style>
-Wert darstellt.
<div class="{line-style}">
<p>{line-style}</p>
<p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
CSS
Im CSS für dieses Beispiel ist die Umrandung und die Spaltenregel für alle <p>
-Elemente mit einer Breite von 7px
und dem Stilwert double
definiert. Für jeden Absatz wird der double
-Wert dann überschrieben, indem ein anderer <line-style>
-Wert für die border-style
und column-rule-style
Eigenschaften angegeben wird.
p {
padding: 5px;
border: double 7px #bada55;
}
p + p {
columns: 3;
column-gap: 20px;
column-rule: double 7px;
border-color: #000000;
}
.none p {
border-style: none;
column-rule-style: none;
}
.hidden p {
border-style: hidden;
column-rule-style: hidden;
}
.dotted p {
border-style: dotted;
column-rule-style: dotted;
}
.dashed p {
border-style: dashed;
column-rule-style: dashed;
}
.solid p {
border-style: solid;
column-rule-style: solid;
}
.double p {
border-style: double;
column-rule-style: double;
}
.groove p {
border-style: groove;
column-rule-style: groove;
}
.ridge p {
border-style: ridge;
column-rule-style: ridge;
}
.inset p {
border-style: inset;
column-rule-style: inset;
}
.outset p {
border-style: outset;
column-rule-style: outset;
}
Ergebnis
Beachten Sie, dass die schwarze Umrandung nicht immer schwarz ist.
Festlegen von Linienstilen und Farben
Dieses Beispiel zeigt die Wahl des Linienstils und der Farbe. Bei einigen Schlüsselwortwerten <line-style>
entspricht die Linienfarbe möglicherweise nicht den Erwartungen. Um den erforderlichen "3D"-Effekt der groove
-, ridge
-, inset
- und outset
-Stile zu erzeugen, verwenden Benutzeragenten beim Anzeigen dieser Werte in Schwarz oder Weiß andere Farb-Berechnungen als jede andere Farblinien-Kombination.
HTML
Dieses Beispiel verwendet mehrere <div>
-Elemente, von denen jedes eine andere border-color
als Inline- style
hat.
<div style="border-color: #000000"></div>
CSS
Die vier Seiten jedes <div>
-Elements haben einen unterschiedlichen <line-style>
-Wert, und jedes Listenelement hat einen anderen <color>
-Wert. Wir verwenden generierten Inhalt, um den CSS-Inhalt anzuzeigen, der inline erklärt wird.
div {
border-width: 10px;
border-style: inset groove ridge outset;
padding: 5px;
}
div::before {
content: attr(style);
}
Ergebnis
Beachten Sie, dass die fast schwarze Farbe von #000001
sich von dem tatsächlichen Schwarz unterscheiden kann und der Kontrast zwischen den dunklen und hellen Kanten bei Verwendung von helleren Farben stärker auffällt.
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # typedef-line-style |