`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

Die rule-width CSS-Eigenschaft definiert die Breiten von Linien, die in den Spaltenabständen von mehrzeiligen Grid-, Flex- und Multi-Column-Layouts gezeichnet werden und legt die Breiten der Spalten- und Zeilenlinien auf denselben Wert fest.

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

Bestandeigenschaften

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, einschließlich:

<line-width>: Eine <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, bei der das erste Argument ein <integer> von 1 oder mehr ist, gefolgt von einem oder mehreren <line-width>-Werten. Der ganzzahlige Wert definiert, wie oft die <line-width>-Werte wiederholt werden sollen.
<auto-repeat-line-width>: Eine repeat()-Funktion, bei der auto das erste Argument ist, gefolgt von einem oder mehreren <line-width>-Werten als nachfolgende Argumente. Die angegebenen <line-width>-Werte werden so oft wiederholt, wie es erforderlich ist, um Werte für alle Regeln zu füllen, die nicht explizit durch andere Komponenten des Eigenschaftswerts angegeben sind.

Beschreibung

Die Kurzform-Eigenschaft rule-width definiert die Breiten der Linien, die in den Zwischenräumen zwischen Spalten und Reihen in mehrspaltigen, 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 können.

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

Wenn der Eigenschaftswert nur aus einem <line-width> besteht, werden alle Zeilen- und Spaltenregeln diese Breite haben. Wenn wir Folgendes deklarieren, werden alle Regeln 3px breit 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 Linienbreiten 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 Linienbreiten

Die repeat()-Funktion kann mit einem ganzzahligen Wert von 1 oder größer als erstem Argument 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, dieselben Breiten eine festgelegte Anzahl von Malen zu wiederholen, ohne die Werte zu wiederholen. Die folgenden Deklarationen sind gleichwertig:

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 zu einem <line-width> aufgelöst werden. Die Verwendung von repeat() kann das Schreiben von Werten erleichtern, insbesondere bei der Durchführung komplexer Längenberechnungen. Es ermöglicht ein wiederkehrendes Muster, das mithilfe einer einzigen Funktion geschrieben wird, unabhängig von der Anzahl der Spalten oder Reihen.

Automatisch wiederholte Linienbreiten

Die repeat()-Funktion akzeptiert auch auto als erstes Argument anstelle einer positiven Ganzzahl. Mit auto als erstem Argument wird 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 wird 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 Reihen gibt, werden keine mittelgroßen Regeln vorhanden sein.

Das auto-Schlüsselwort innerhalb der repeat()-Funktion erstellt einen Auto-Repeater, der Werte für Spalten- und Zeilenregeln auffüllt, die sonst keine Werte von anderen Teilen der Liste erhalten würden, um zu verhindern, dass die Liste durchlaufen wird. Es kann höchstens 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

Einfaches Beispiel

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

HTML

Wir erstellen eine Liste von 75 Elementen. Der größte 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 10-spaltigen Grid-Container. Wir fügen ein gap von 5px hinzu, um genügend Platz zwischen den Elementen für unsere 3px gestrichelte rote Linie zu schaffen:

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

Wiederholende Werte

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

Mit demselben HTML und CSS wie im vorherigen Beispiel fügen wir drei durch Kommas getrennte Breiten als rule-width ein.

css

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

Da der Grid-Container 8 Reihen und 10 Spalten hat, gibt es sieben und neun Abstände in jeder Richtung, sodass die Folge der drei <line-width>-Werte in beide Richtungen wiederholt wird.

Die Verwendung der `repeat()`-Funktion

Dieses Beispiel zeigt die Verwendung der repeat()-Funktion innerhalb des rule-width Eigenschaftswerts und wie diese Funktion dazu beitragen kann, die Ausführlichkeit von Wertdeklarationen 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 und erstellt eine Liste von zehn Breitenwerten. Da es weniger Spalten- und Zeilenabstände als Gesamtbreiten gibt, werden die letzten Werte in der Liste verworfen.

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

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

Mithilfe von 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