rule-width CSS property

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;
}

Zugehörige Eigenschaften

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

• column-rule-width
• row-rule-width

Syntax

/* 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 Eigenschaft rule-width akzeptiert eine durch Kommas getrennte Liste von Werten, darunter:

<line-width>

Ein <line-width>-Wert: Dies kann eines der Schlüsselwörter thin, medium oder thick oder ein positiver <length>-Wert sein, der die Breite der Linie angibt. Der Standardwert ist medium.

<repeat-line-width>

Eine repeat()-Funktion mit einem <integer>-Wert von 1 oder mehr als erstem Argument und einem oder mehreren <line-width>-Werten als weiteren Argumenten. Die Ganzzahl legt fest, wie oft die <line-width>-Werte wiederholt werden.

<auto-repeat-line-width>

Eine repeat()-Funktion mit auto als erstem Argument und einem oder mehreren <line-width>-Werten als weiteren Argumenten. Die angegebenen <line-width>-Werte werden so oft wiederholt, wie es nötig ist, um Werte für alle Linien bereitzustellen, die nicht ausdrücklich durch andere Bestandteile des Eigenschaftswerts festgelegt sind.

Beschreibung

Die Kurzschreibweise rule-width definiert die Breite von Linien, die in den Zwischenräumen zwischen Spalten und Zeilen von Mehrspalten-, Flex- und Grid-Containern mit mehr als einer Zeile oder Spalte gezeichnet werden.

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

Die Eigenschaft rule-width kann zusammen mit den Eigenschaften rule-color und rule-style über die Kurzschreibweise rule festgelegt werden.

Besteht der Eigenschaftswert nur aus einem <line-width>-Wert, erhalten alle Linien zwischen Zeilen und Spalten diese Breite. Mit der folgenden Deklaration sind alle Linien 3px breit:

rule-width: 3px;

Wenn mehrere <line-width>-Werte angegeben werden, werden sie in der angegebenen Reihenfolge auf die Linien angewendet. Gibt es mehr Linien als <line-width>-Werte, wird die Liste der Linienbreiten wiederholt, bis jede Linie eine Breite hat. Mit der folgenden Deklaration ist beispielsweise jede ungerade horizontale und vertikale Linie thin und jede gerade Linie 1em breit.

rule-width: thin, 1em;

Wiederholte Linienbreiten

Mit der Funktion repeat() und einer Ganzzahl von mindestens 1 als erstem Argument können Sie eine als weitere Argumente übergebene Liste gültiger CSS-<line-width>-Werte die angegebene Anzahl von Malen wiederholen. So lassen sich dieselben Breiten mehrfach verwenden, ohne die Werte erneut aufzuführen. Die folgenden Deklarationen sind gleichwertig:

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 zu einem <line-width>-Wert aufgelöst werden. repeat() kann die Angabe von Werten vereinfachen, insbesondere bei komplexen Längenberechnungen. Damit lässt sich ein wiederkehrendes Muster unabhängig von der Anzahl der Spalten oder Zeilen mit einer einzigen Funktion ausdrücken.

Automatisch wiederholte Linienbreiten

Die Funktion repeat() akzeptiert als erstes Argument auch auto anstelle einer positiven Ganzzahl. Bei auto werden die als weitere Argumente übergebenen <line-width>-Werte so oft wiederholt, wie es nötig ist, um Werte für alle Linien bereitzustellen, die nicht ausdrücklich durch andere Bestandteile des Eigenschaftswerts festgelegt sind.

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

In diesem Fall sind die jeweils erste und letzte Linie zwischen Spalten und Zeilen immer thin und alle übrigen Linien medium. Bei nur zwei oder drei Spalten und Zeilen gibt es keine Linien mit der Breite medium.

Das Schlüsselwort auto innerhalb der Funktion repeat() erzeugt eine automatische Wiederholung. Sie weist Spalten- und Zeilenlinien Werte zu, die andernfalls durch keinen anderen Teil der Liste einen Wert erhalten würden, und verhindert so, dass die Liste erneut von vorn durchlaufen wird. Ein rule-width-Wert darf höchstens ein repeat(auto, <width>) enthalten.

Formale Definition

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

Einfaches Beispiel

In diesem Beispiel legen wir eine einheitliche Breite für die Linien zwischen den Spalten und Zeilen eines Grid-Containers fest.

HTML

Wir erstellen eine Liste mit 75 Elementen. Der größte Teil des HTML-Codes ist der Kürze halber ausgeblendet.

<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 Grid-Container mit 10 Spalten. Ein gap von 5px schafft zwischen den Elementen genügend Platz für die rote, gestrichelte Linie mit einer Breite von 3px:

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

Werte wiederholen

Dieses Beispiel zeigt, wie die Werte wiederholt werden, wenn die Liste weniger Breitenwerte enthält, als es Linien zwischen Spalten oder Zeilen gibt.

CSS

Wir verwenden dasselbe HTML und CSS wie im vorherigen Beispiel und geben für rule-width drei durch Kommas getrennte Breiten an.

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

Ergebnis

Da der Grid-Container 8 Zeilen und 10 Spalten hat, gibt es in den beiden Richtungen sieben beziehungsweise neun Zwischenräume. Daher wird die Folge der drei <line-width>-Werte in beiden Richtungen wiederholt.

Die Funktion repeat() verwenden

Dieses Beispiel zeigt, wie Sie die Funktion repeat() im Wert der Eigenschaft rule-width verwenden und damit kürzere Wertangaben schreiben können.

CSS

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 des rule-width-Werts verwenden. Die Funktion repeat() legt fest, dass eine Liste aus zwei <line-width>-Werten dreimal wiederholt wird.

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

Ergebnis

Die Funktion repeat() wiederholt zwei Breitenwerte viermal und erzeugt so eine Liste mit zehn Breitenwerten. Da es weniger Zwischenräume zwischen Spalten und Zeilen als Breitenwerte gibt, werden die letzten Werte der Liste verworfen.

auto innerhalb von repeat() verwenden

Dieses Beispiel zeigt, wie Sie innerhalb der Funktion repeat() auto anstelle einer Ganzzahl verwenden.

CSS

Mit repeat(auto, <line-width>) setzen wir alle Linien zwischen Spalten und Zeilen auf 1px, mit Ausnahme der jeweils ersten und letzten Linie, die wir auf 5px setzen.

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

Ergebnis

@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

Browser-Kompatibilität

Siehe auch

• rule-color
• rule-style
• column-rule-width
• row-rule-width
• Kurzschreibweise rule
• CSS-Zwischenräume definieren
• Modul CSS-Zwischenräume