`rule-width` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die rule-width CSS Eigenschaft definiert die Breiten von Linien, die in den Zwischenräumen von mehrzeiligen Raster-, Flex- und Multi-Column-Layouts gezeichnet werden, und setzt die Breiten der Spalten- und Zeilenlinien auf denselben Wert.

Probieren Sie es aus

rule-width: thin;

rule-width: thin, thick;

rule-width: 1px, 10px;

rule-width: repeat(2, thin, thick), 10px;

rule-width: thick, repeat(auto, 1px, 2px), thick;

<section id="default-example">
  <div id="example-element">
    <i>A</i>
    <i>B</i>
    <i>C</i>
    <i>D</i>
    <i>E</i>
    <i>F</i>
    <i>G</i>
    <i>H</i>
    <i>I</i>
    <i>J</i>
    <i>K</i>
    <i>L</i>
    <i>M</i>
    <i>N</i>
    <i>O</i>
    <i>P</i>
    <i>Q</i>
    <i>R</i>
    <i>S</i>
    <i>T</i>
    <i>U</i>
    <i>V</i>
    <i>W</i>
    <i>X</i>
    <i>Y</i>
    <i>Z</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  rule: solid magenta;
}
#example-element i {
  padding: 5px;
}

Zusätzliche Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css

/* Keyword values */
rule-width: thin;
rule-width: medium;
rule-width: thick;
rule-width: thin, medium, thick;
rule-width: thick, repeat(5, thin), thick;
rule-width: thick, repeat(auto, thin, medium), thick;

/* Length values */
rule-width: 1px;
rule-width: 5px;
rule-width: 1px, 3px, 5px;
rule-width: 5px, repeat(auto, 1px), 10px, 15px;
rule-width: 5px, repeat(5, 1px, 3px), 5px;

/* Global values */
rule-width: inherit;
rule-width: initial;
rule-width: revert;
rule-width: revert-layer;
rule-width: unset;

Werte

Die rule-width-Eigenschaft akzeptiert eine durch Kommas getrennte Liste von Werten, darunter:

<line-width>: Ein <line-width>: Dies kann eines der Schlüsselwörter thin, medium oder thick sein, oder ein positiver <length>-Wert, der die Breite der Linie darstellt. Der Standardwert ist medium.
<repeat-line-width>: Eine repeat() Funktion, wobei das erste Argument ein <integer> von 1 oder mehr ist, und ein oder mehrere <line-width>-Werte als nachfolgende Argumente. Der Integer definiert, wie oft die <line-width>-Werte wiederholt werden sollen.
<auto-repeat-line-width>: Eine repeat() Funktion, mit auto als erstes Argument und einem oder mehreren <line-width>-Werten als nachfolgende Argumente. Die angegebenen <line-width>-Werte werden so oft wie nötig wiederholt, um Werte für alle Regeln zu füllen, die nicht explizit durch andere Komponenten des Eigenschaftswerts angegeben sind.

Beschreibung

Die rule-width Kurzform-Eigenschaft definiert die Breiten der Linien, die in den Lücken zwischen Spalten und Zeilen in Multi-Column, Flex und Grid-Containern mit mehr als einer Zeile oder Spalte gezeichnet werden.

Der Wert ist eine durch Kommas getrennte Liste von Komponenten, die <line-width>, <repeat-line-width> und <auto-repeat-line-width> Typen enthalten kann.

Die rule-width-Eigenschaft kann zusammen mit den rule-color und rule-style Eigenschaften durch die rule Kurzform gesetzt werden.

Besteht der Eigenschaftswert nur aus einem <line-width>, werden alle Zeilen- und Spaltenregeln diese Breite haben. Wenn wir folgendes deklarieren, werden alle Regeln 3px sein:

css

rule-width: 3px;

Wenn mehrere <line-width>-Werte deklariert werden, werden sie in der angegebenen Reihenfolge auf die Regeln angewendet. Wenn es mehr Regeln als <line-width>-Werte gibt, wird die Liste der Linienstärken wiederholt, bis jede Regel eine Breite hat. Wenn wir zum Beispiel folgendes deklarieren, wird jede ungerade horizontale und vertikale Regel thin sein und jede gerade Regel 1em.

css

rule-width: thin, 1em;

Wiederholte Linienstärken

Die repeat()-Funktion, mit einem Integer von 1 oder größer als erstes Argument, kann verwendet werden, um eine gültige Liste von CSS <line-width>-Werten, die als nachfolgende Argumente übergeben werden, die angegebene Anzahl von Malen zu wiederholen. Dies ermöglicht es, die gleichen Breiten eine feste Anzahl von Malen zu wiederholen, ohne die Werte zu wiederholen. Die folgenden Deklarationen sind äquivalent:

css

rule-width: 1rem, thick, thin, thick, thin, thick, thin;
rule-width: 1rem, repeat(3, thick, thin);

Sie können beliebige <line-width>-Werte verwenden, einschließlich benutzerdefinierter Eigenschaften, die auf eine <line-width> aufgelöst werden. Die Verwendung von repeat() kann es erleichtern, Werte zu schreiben, insbesondere bei der Verwendung komplexer Längenberechnungen. Sie ermöglicht es, ein wiederkehrendes Muster mit einer einzigen Funktion zu schreiben, unabhängig von der Anzahl der Spalten oder Zeilen.

Automatisch wiederholte Linienstärken

Die repeat()-Funktion akzeptiert auch auto als erstes Argument anstelle eines positiven Integers. Mit auto als erstes Argument werden die Liste der <line-width>-Werte, die als nachfolgende Argumente übergeben werden, so oft wie nötig wiederholt, um Werte für alle Regeln zu füllen, die nicht explizit durch andere Komponenten des Eigenschaftswerts angegeben sind.

css

rule-width: thin, repeat(auto, medium), thin;

In diesem Fall werden die erste und letzte Spalten- und Zeilenregel immer thin sein, und alle anderen Regeln werden medium sein. Wenn es nur 2 oder 3 Spalten und Zeilen gibt, wird es keine mittelgroßen Regeln geben.

Das auto Schlüsselwort innerhalb der repeat()-Funktion erstellt einen Auto-Repeater, der Werte für Spalten- und Zeilenregeln füllt, die andernfalls keine Werte von anderen Teilen der Liste erhalten würden, und verhindert, dass die Liste durchlaufen wird. Maximal kann nur ein repeat(auto, <width>) in einem rule-width-Wert vorhanden sein.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

rule-width = 
  <'column-rule-width'>  

<column-rule-width> = 
  <line-width-list>       |
  <auto-line-width-list>  

<line-width-list> = 
  <line-width-or-repeat>#  

<auto-line-width-list> = 
  <line-width-or-repeat>#? , <auto-repeat-line-width> , <line-width-or-repeat>#?  

<line-width-or-repeat> = 
  <line-width>         |
  <repeat-line-width>  

<auto-repeat-line-width> = 
  repeat( auto , [ <line-width> ]# )  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

<repeat-line-width> = 
  repeat( [ <integer [1,∞]> ] , [ <line-width> ]# )  

<integer> = 
  <number-token>

Beispiele

Grundlegendes Beispiel

In diesem Beispiel definieren wir eine einzelne Breite für die Linien, die zwischen den Spalten und Zeilen von Elementen in einem Grid-Container gezeichnet werden.

HTML

Wir erstellen eine Liste von 75 Elementen. Ein Großteil des HTML ist aus Gründen der Übersichtlichkeit ausgeblendet.

html

<ul>
  <li>1</li>
  <li>2</li>
  ...
  <li>74</li>
  <li>75</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li>52</li>
  <li>53</li>
  <li>54</li>
  <li>55</li>
  <li>56</li>
  <li>57</li>
  <li>58</li>
  <li>59</li>
  <li>60</li>
  <li>61</li>
  <li>62</li>
  <li>63</li>
  <li>64</li>
  <li>65</li>
  <li>66</li>
  <li>67</li>
  <li>68</li>
  <li>69</li>
  <li>70</li>
  <li>71</li>
  <li>72</li>
  <li>73</li>
  <li>74</li>
  <li>75</li>
</ul>

CSS

Wir definieren die ungeordnete Liste als einen 10-Spalten-Grid-Container. Wir fügen einen gap von 5px ein, um genug Platz zwischen den Elementen zu haben, damit unsere 3px gestrichelte rote Regel passt:

css

ul {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  list-style-type: none;
  gap: 5px;
  rule-style: dashed;
  rule-color: red;
  rule-width: 3px;
}
li {
  text-align: center;
  aspect-ratio: 1;
}

@layer no-support {
  @supports not (rule-width: medium) {
    body::before {
      content: "Your browser doesn't support the rule-width property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Ergebnis

Wiederholte Werte

Dieses Beispiel zeigt, wie die Werte wiederholt werden, wenn es weniger Werte in der Liste der Breiten als Spalten- oder Zeilenregeln gibt.

Wir verwenden dasselbe HTML und CSS wie im vorherigen Beispiel, und fügen drei durch Kommas getrennte Breiten als rule-width hinzu.

css

ul {
  rule-width: thin, 6px, 12px;
}

Da der Grid-Container 8 Zeilen und 10 Spalten hat, gibt es jeweils sieben und neun Rillen in jede Richtung, sodass die Sequenz von drei <line-width>-Werten in beide Richtungen wiederholt wird.

Verwendung der `repeat()`-Funktion

Dieses Beispiel zeigt die Verwendung der repeat()-Funktion im rule-width-Eigenschaftswert und wie diese Funktion helfen kann, die Länge der Wertedeklarationen zu reduzieren.

Wir verwenden dasselbe HTML und CSS wie in den vorherigen Beispielen. Zusätzlich deklarieren wir zwei benutzerdefinierte Eigenschaften, die wir in einer repeat()-Funktion innerhalb unseres rule-width-Werts verwenden. Die repeat()-Funktion setzt eine Liste von zwei <line-width>-Werten, die dreimal wiederholt werden.

css

ul {
  --base: 0.5vw;
  --secondary: 1vw;
  rule-width:
    15px,
    repeat(
      4,
      min(calc(var(--base) + 3px), 10px),
      abs(calc(var(--secondary) - 2px))
    ),
    15px;
}

Die repeat()-Funktion wiederholt zwei Breitenwerte viermal, wodurch eine Liste von zehn Breitenwerten entsteht. Da es weniger Spalten- und Zeilenrillen als Gesamtbreiten gibt, werden die letzten Werte in der Liste verworfen.

Verwendung von `auto` innerhalb von `repeat()`

Dieses Beispiel zeigt die Verwendung von auto anstelle eines Integers innerhalb der repeat()-Funktion.

Mit repeat(auto, <line-width>) setzen wir alle Spalten- und Zeilenregeln auf 1px, außer der ersten und letzten, die wir auf 5px setzen.

css

ul {
  rule-width: 5px, repeat(auto, 1px), 5px;
}

@layer no-support {
  @supports not (rule-width: thin, thick) {
    body::before {
      content: "Your browser doesn't support the rule-width property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Spezifikationen

Spezifikation
CSS Gaps Module Level 1 # propdef-rule-width

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

rule-width CSS property

HTML

CSS

Ergebnis

Help improve MDN

`rule-width` CSS property