<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>
aufgezählte Werttyp 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 column 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>
aufgezählte Typ wird mithilfe eines der unten aufgelisteten Werte angegeben:
none
-
Zeigt keine Linie an. Der berechnete Wert der Linienbreite ist
0
, auch wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Grenzüberlappungen hat dernone
Wert die niedrigste Priorität. Wenn eine andere widersprüchliche Grenze gesetzt ist, wird sie angezeigt. Dernone
Wert ist ähnlich wiehidden
. -
Zeigt keine Linie an. Die berechnete Breite der Linie ist
0
, auch wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Grenzüberlappungen hat derhidden
Wert die höchste Priorität. Wenn eine andere widersprüchliche Grenze gesetzt ist, wird sie nicht angezeigt. Derhidden
Wert ist ähnlich wienone
, aberhidden
ist kein gültiger Wert für Konturstile. dotted
-
Zeigt eine Reihe von runden Punkten an. Der Radius der Punkte ist die Hälfte des berechneten Werts der Linienbreite. Der Abstand der Punkte ist nicht durch die Spezifikation definiert und hängt von der Implementierung ab.
dashed
-
Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Liniensegmenten an. Die genaue Größe und Länge der Segmente sind nicht durch die Spezifikation definiert und hängen von der Implementierung ab.
solid
-
Zeigt eine einzelne, gerade, durchgezogene Linie an.
double
-
Zeigt zwei gerade Linien mit einem Abstand dazwischen an. Die Länge der Linien addiert sich zur Pixelgröße, die durch die Linienbreite definiert ist.
groove
-
Zeigt eine Grenze mit geschnitztem Aussehen an. Dieser Wert ist das Gegenteil von
ridge
. ridge
-
Zeigt eine Grenze mit hervorgehobenem Aussehen an. Dieser Wert ist das Gegenteil von
groove
. inset
-
Zeigt eine Grenze, die das Element eingebettet erscheinen lässt. Dieser Wert ist das Gegenteil von
outset
. Wenn er auf eine Tabellenzellengrenze angewendet wird undborder-collapse
aufcollapsed
gesetzt ist, verhält sich dieser Wert wiegroove
. outset
-
Zeigt eine Grenze, die das Element hervorgehoben erscheinen lässt. Dieser Wert ist das Gegenteil von
inset
. Wenn er auf eine Tabellenzelle mitborder-collapse
aufcollapsed
gesetzt angewendet wird, verhält sich dieser Wert wieridge
.
Hinweis: Wenn <outline-style>
als Werttyp für die Eigenschaften outline
und outline-style
verwendet wird, ist es ähnlich wie <line-style>
, unterstützt jedoch hidden
nicht und enthält den Wert auto
. Wenn auto
gesetzt ist, wird der vom Benutzeragenten definierte <line-style>
Wert verwendet.
Beispiele
Das erste Beispiel demonstriert alle <line-style>
Schlüsselwortwerte. Das zweite Beispiel demonstriert, wie einige Linienstilfarben möglicherweise auf unerwartete Weise angezeigt werden.
Definition von Linienstilen
Dieses Beispiel zeigt alle <line-style>
Werte als Werte für die CSS-Eigenschaften border-style
und column-rule-style
.
HTML
Dieses Beispiel verwendet mehrere <div>
Elemente, jedes mit einer Klasse, die den <line-style>
Wert repräsentiert, der demonstriert wird.
<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 wird die Grenze und die Spaltenregel für alle <p>
Elemente definiert, eine Breite von 7px
und den Stilwert double
zu haben. Bei jedem Absatz wird der double
Wert dann überschrieben, indem ein anderer <line-style>
Wert für die Eigenschaften border-style
und column-rule-style
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 Grenze nicht immer schwarz ist.
Definition von Linienstilen und Farben
Dieses Beispiel demonstriert die Auswahl von Linienstil und Farbe. Bei einigen <line-style>
Schlüsselwerten entspricht die Farbe der Linie möglicherweise nicht Ihren Erwartungen. Um den erforderlichen "3D"-Effekt der groove
, ridge
, inset
und outset
Stile zu erzeugen, verwenden Benutzeragenten bei der Anzeige dieser Werte in Schwarz oder Weiß andere Farbberechnungen als bei allen anderen Farblinien-Kombinationen.
HTML
Dieses Beispiel verwendet mehrere <div>
Elemente, jedes mit einer anderen border-color
als inline style
gesetzt.
<div style="border-color: #000000"></div>
CSS
Die vier Seiten jedes <div>
haben einen anderen <line-style>
Wert, und jedes Listenelement hat einen unterschiedlichen <color>
Wert. Wir verwenden generierten Inhalt, um den in CSS deklarierten Inline-Stil anzuzeigen.
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 eigentlichen Schwarz unterscheiden kann und der Kontrast zwischen den dunklen und hellen Kanten bei Verwendung heller Farben auffälliger ist.
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # typedef-line-style |
Browser-Kompatibilität
BCD tables only load in the browser