`<dashed-function>` CSS-Typ

Eingeschränkt verfügbar

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

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

Der <dashed-function> CSS Datentyp steht für die Syntax, die verwendet wird, um CSS Custom Functions aufzurufen, welche mithilfe der @function At-Regel definiert werden.

Syntax

Ein <dashed-function>-Wert besteht aus dem --function-name, gefolgt von Klammern, die die Argumente der Funktion enthalten (zum Beispiel --my-function(30px, 3)).

Sie können <dashed-function>-Werte anstelle von regulären CSS-Eigenschaftswerten oder Komponenten von Eigenschaftswerten einfügen, in Fällen, in denen Sie die Werte dynamisch basierend auf der Logik der Funktion berechnen möchten, anstatt statische Werte bereitzustellen.

In Fällen, in denen Sie Komma-enthaltende Werte als Argumente übergeben möchten, können Sie dies tun, indem Sie sie in geschweifte Klammern ({ }) setzen.

Beispiele

Für weitere Beispiele, siehe unseren Leitfaden zur Verwendung von CSS-Custom-Functions.

Grundlegende `<dashed-function>` Nutzung

Dieses Beispiel zeigt eine grundlegende Funktion, die eine halbtransparente Version der übergebenen Farbe zurückgibt.

HTML

Das Markup enthält ein <p> mit etwas Textinhalt:

html

<p>Some content</p>

CSS

In unseren Styles definieren wir zuerst die CSS-Custom-Function. Die Funktion wird --transparent genannt und akzeptiert zwei Parameter: eine Farbe und einen numerischen Alpha-Kanalwert. Innerhalb des Funktionskörpers verwenden wir relative Farbsyntax, um die übergebene Farbe in eine oklch() Farbe mit einem Alpha-Kanal zu transformieren, der dem übergebenen Alphawert entspricht; dies wird das result der Funktion:

css

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

Als nächstes definieren wir eine --base-color Custom Property mit einem Wert von #faa6ff auf dem :root Element. Wir ordnen diese Eigenschaft dem Wert der border-Farbe des <p> Elements zu und setzen dann den Wert von background-color so, dass er einer transparenten Version derselben Farbe entspricht. Dies wird erreicht, indem der Wert auf die <dashed-function>-Syntax gesetzt wird, wobei die --transparent()-Funktion angegeben und die Argumente var(--base-color) und 0.8 übergeben werden.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

css

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}