`rule-inset-cap` 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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Die CSS-Kurzschreibweise rule-inset-cap kann verwendet werden, um die Cap-Endpunkte von Spalten- und Zeilen-Trennliniensegmenten um denselben Wert zu versetzen.

Probieren Sie es aus

rule-inset-cap: -20px;

rule-inset-cap: 0;

rule-inset-cap: 1em;

rule-inset-cap: 100%;

rule-inset-cap: overlap-join;

<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 id="y">Y</i>
    <i id="z">Z</i>
    <i id="bang">!</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  rule: solid thick magenta;
  column-rule-color: rebeccapurple;
  gap: 1em;
  rule-overlap: column-over-row;
  rule-visibility-items: between;
  border: 1px solid rebeccapurple;
  overflow: visible;
  margin: 1em;
}
#example-element i {
  padding: 8px;
  border: 1px dashed;
}
#y {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}
#z {
  grid-column: 5 / 6;
  grid-row: 4 / 5;
}
#bang {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
}

Zugehörige Eigenschaften

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

Syntax

css

/* Keywords */
rule-inset-cap: overlap-join;

/* A <length-percentage> value */
rule-inset-cap: 0;
rule-inset-cap: 1em;
rule-inset-cap: -5px;
rule-inset-cap: -25%;

/* Two values */
rule-inset-cap: 0 20px;
rule-inset-cap: 1em -5px;
rule-inset-cap: overlap-join -25%;

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

Werte

Diese Eigenschaft wird mit einem oder zwei Werten aus der folgenden Liste angegeben:

overlap-join: Entspricht 0.
<length-percentage>: Gibt die Größe des Einzugs an. Prozentwerte entsprechen für Cap-Endpunkte am Rand des Containers 0. Bei inneren Zwischenräumen beziehen sich Prozentwerte für Endpunkte von Spaltensegmenten auf die Höhe des angrenzenden row-gap und für Endpunkte von Zeilensegmenten auf die Breite des angrenzenden column-gap.

Mit der Kurzschreibweise rule-inset-cap können die Eigenschaften row-rule-inset-cap und column-rule-inset-cap in einer einzigen Deklaration auf denselben Wert gesetzt werden. Dadurch werden die Cap-Endpunkte von Zeilen- und Spaltensegmenten um die angegebenen Werte nach innen versetzt.

Wenn Sie einen Wert angeben, werden sowohl die Anfangs- als auch die Endpunkte der Cap-Segmente auf diesen Wert gesetzt. Wenn Sie zwei Werte angeben, werden die Anfangspunkte der Zeilen- und Spalten-Cap-Segmente auf den ersten Wert und ihre Endpunkte auf den zweiten Wert gesetzt.

Der Standardwert ist 0, was bei Cap-Endpunkten overlap-join entspricht. Positive Werte verkürzen das Segment, negative Werte verlängern es.

Die Eigenschaft rule-inset-cap kann zusammen mit der Eigenschaft rule-inset-junction über die Kurzschreibweise rule-inset festgelegt werden.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

rule-inset-cap = 
  <'column-rule-inset-cap'>  

<column-rule-inset-cap> = 
  <inset-value> <inset-value>?  

<inset-value> = 
  <length-percentage>  |
  overlap-join         

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie Sie mit rule-inset-cap die Endpunkte von Cap-Segmenten in Flex-Containern nach innen versetzen.

HTML

Das Markup enthält zwei <div>-Elemente mit jeweils sieben Kindelementen. Der einzige Unterschied zwischen den beiden Containern besteht darin, dass der zweite zusätzlich die Klasse column hat.

html

<h1>Insetting cap endpoints</h1>
<article>
  <section>
    <h2>flex-direction: row</h2>
    <div class="flexbox">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
  <section>
    <h2>flex-direction: column</h2>
    <div class="flexbox column">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
</article>

<p>
  <label
    >Change the size of the inset.
    <input type="range" min="-40" max="16" value="16" id="inset"
  /></label>
  <output id="o">16px</output>
</p>

CSS

Mit der Eigenschaft display machen wir die .flexbox-Elemente zu Flex-Containern. Mithilfe von flex-wrap und flex-line-count verteilen wir die Elemente auf drei Flex-Zeilen. Wir definieren eine hellblaue rule für die Zwischenräume zwischen Zeilen und Spalten und überschreiben anschließend column-rule-color, sodass die vertikalen Zwischenräume mit einem dunkleren blue hervorgehoben werden. Schließlich setzen wir rule-inset-cap auf 16px.

css

.flexbox {
  display: flex;
  flex-wrap: balance;
  flex-line-count: 3;
  gap: 20px;
  rule: 5px solid lightblue;
  column-rule-color: blue;

  rule-inset-cap: 16px;
}

Für den Container .column setzen wir außerdem flex-direction, damit seine Elemente in Spalten statt in Zeilen angeordnet werden. Der Kürze halber sind die übrigen CSS-Stile und der Code für die Interaktivität des Formulars ausgeblendet.

css

.column {
  flex-direction: column;
}

h1,
article {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  font-size: 1.25em;
}
h2 {
  font-size: 1em;
}
article {
  display: flex;
  gap: 5vw;
  rule: 1px solid black;
  width: 90vw;
  margin: auto;
}
section {
  flex-basis: 45vw;
}
.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  height: 30px;
}
output {
  display: inline-block;
  width: 2em;
}
p {
  margin-top: 2.5em;
}
@layer no-support {
  @supports not (rule-inset-cap: 16px) {
    body::before {
      content: "Your browser doesn't support the rule-inset-cap property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const inset = document.getElementById("inset");
const containers = document.querySelectorAll(".flexbox");
const output = document.getElementById("o");

inset.addEventListener("input", () => {
  const val = `${inset.value}px`;
  containers[0].style.ruleInsetCap = val;
  containers[1].style.ruleInsetCap = val;
  output.innerText = val;
});

Ergebnis

Ändern Sie die Größe des Einzugs.

Zwei Werte festlegen

HTML

<p>
  <label
    >Change the <code>row-rule-inset-cap</code> value.
    <input type="range" min="-40" max="40" value="40" id="row" data-unit="px"
  /></label>
  <output id="og">40px</output>
</p>
<p>
  <label
    >Change the <code>column-rule-inset-cap</code> value.
    <input type="range" min="-40" max="40" value="-40" id="col" data-unit="px"
  /></label>
  <output id="ow">-40px</output>
</p>

Unser HTML enthält eine ungeordnete Liste (<ul>) mit neun Listeneinträgen (<li>):

html

<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>
</ul>

Die Benutzeroberfläche zur Auswahl verschiedener Werte und das JavaScript für die Interaktivität sind der Kürze halber ausgeblendet.

CSS

Wir erstellen einen Grid-Container, indem wir display auf grid setzen, mit grid-template-columns vier Spalten erstellen und einen gap von 30px hinzufügen. Mit den Eigenschaften row-rule und column-rule definieren wir die Trennlinien. Anschließend verwenden wir rule-inset-cap, um die Anfangspunkte der Cap-Segmente um 40px nach innen und die Endpunkte mit -40px nach außen zu versetzen.

Außerdem legen wir fest, dass sich das sechste Grid-Element über zwei Spalten erstreckt.

css

ul {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;
  row-rule: 16px solid olive;
  column-rule: 10px solid palegoldenrod;

  rule-inset-cap: 40px -40px;
}
li:nth-of-type(6) {
  grid-column-end: span 2;
}

ul {
  width: calc(95vw - 80px);
  border: 1px solid;
  list-style-type: none;
  margin: auto;
  padding: 0;
  place-items: center;
}
li {
  place-content: center;
  text-align: center;
  font-family: sans-serif;
  background-color: #ededed;
  padding: 5vw;
  width: 100%;
  box-sizing: border-box;
}
li:nth-of-type(6) {
  padding: 2em 0;
}
li code {
  display: block;
  margin: 0 auto;
  text-align: left;
  background-color: #fcfcfc;
  width: calc(47.5vw - 40px);
}
output {
  font-family: monospace;
}
input {
  accent-color: olive;
}
@layer no-support {
  @supports not (rule-inset-cap: 16px) {
    body::before {
      content: "Your browser doesn't support the rule-inset-cap property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const ul = document.querySelector("ul");
const rowSize = document.getElementById("row");
const og = document.getElementById("og");
const colSize = document.getElementById("col");
const ow = document.getElementById("ow");
const cell = document.querySelector("li:nth-of-type(6)");
let text = "";
function update() {
  ul.style.ruleInsetCap = text = `${rowSize.value}px ${colSize.value}px`;
  cell.innerHTML = `<code>rule-inset-cap: ${text};</code>`;
}

update();

rowSize.addEventListener("input", () => {
  og.innerText = `${rowSize.value}px`;
  update();
});

colSize.addEventListener("input", () => {
  ow.innerText = `${colSize.value}px`;
  update();
});

Ergebnis

Ändern Sie die Einzugswerte für die Anfangs- und Endpunkte der Cap-Segmente.

Innere Cap-Segmente

Dieses Beispiel zeigt, wie Sie mit rule-inset-cap die Endpunkte von Cap-Segmenten in einem Grid-Container nach innen versetzen und wie die Eigenschaft rule-visibility-items innere Endpunkte in Cap-Endpunkte umwandeln kann.

HTML

Als Container für mehrere Listeneinträge (<li>) verwenden wir eine ungeordnete Liste (<ul>).

Außerdem fügen wir ein <select>-Element mit einem <option>-Element für jedes rule-visibility-items-Schlüsselwort sowie ein <input>-Element vom Typ range hinzu.

html

<ul id="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>
</ul>

<p>
  <label>
    <code>rule-visibility-items</code> value
    <select id="visibility">
      <option>all</option>
      <option>between</option>
      <option>around</option>
      <option selected>normal</option>
    </select>
  </label>
</p>

<p>
  <label
    >Change the inset size.
    <input type="range" min="-40" max="16" value="0" id="inset" data-unit="px"
  /></label>
  <output id="o"></output>
</p>

CSS

Wir erstellen einen Grid-Container, indem wir display auf grid setzen, mit grid-template-columns sechs Spalten erstellen und einen gap von 20px hinzufügen. Mit der Eigenschaft rule definieren wir die Trennlinien und überschreiben deren Farbe für Zeilen mit row-rule-color. Wir setzen rule-break so, dass die Trennlinien an jeder Kreuzung unterbrochen werden und jedes Trennliniensegment eigenständig ist. rule-visibility-items setzen wir ausdrücklich auf den Standardwert normal. Anschließend verwenden wir rule-inset-cap, um alle Cap-Endpunkte um 16px nach innen zu versetzen.

Außerdem legen wir mit der Eigenschaft grid-column-end fest, dass sich der siebte Listeneintrag über zwei Spalten erstreckt.

css

ul {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 20px;
  rule: 10px solid olive;
  row-rule-color: palegoldenrod;
  rule-break: intersection;
  rule-visibility-items: normal;

  rule-inset-cap: 16px;
}

li:nth-of-type(7) {
  grid-column-end: span 2;
}

Der Kürze halber sind die übrigen CSS-Stile und der Code für die Interaktivität des Formulars ausgeblendet.

ul {
  place-items: center;
  padding: 0;
  list-style-type: none;
  border: 1px solid;
  margin: 40px;
}
li {
  text-align: center;
  font-family: sans-serif;
  background-color: #ededed;
  padding: 1em;
  width: 100%;
  box-sizing: border-box;
}
li:nth-of-type(n + 9) {
  grid-row: 3 / 4;
}
li:nth-of-type(n + 12) {
  grid-row: 4 / 5;
}
li:nth-of-type(10) {
  grid-column: 5/6;
}
li:nth-of-type(11) {
  grid-column: 6/7;
}

li:nth-of-type(15) {
  grid-area: 4 / 5 / 5 / 6;
}
li:nth-of-type(16) {
  grid-area: 4 / 6 / 5 / 7;
}
li:nth-of-type(17) {
  display: none;
  grid-area: 5 / 6 / 6 / 7;
}
@layer no-support {
  @supports not (rule-inset-cap: 16px) {
    body::before {
      content: "Your browser doesn't support the rule-inset-cap property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const inset = document.getElementById("inset");
const visibility = document.getElementById("visibility");
const ul = document.getElementById("ul");
const output = document.getElementById("o");

inset.addEventListener("input", () => {
  output.innerText =
    ul.style.ruleInsetCap = `${inset.value}${inset.dataset["unit"]}`;
});

visibility.addEventListener("change", () => {
  ul.style.ruleVisibilityItems = `${visibility.value}`;
});

Ergebnis

Wählen Sie between aus der Dropdown-Liste, damit Trennliniensegmente nur gezeichnet werden, wenn beide angrenzenden Grid-Bereiche ein Grid-Element enthalten. Dadurch entstehen innere Cap-Segmente. Ändern Sie nun den Einzugswert, um zu erkennen, welche Segmentendpunkte Cap-Endpunkte sind.