<dashed-function>：CSS 自定義函式

語法

<dashed-function> 值由 --function-name 組成，後跟包含函式引數的括號（例如，--my-function(30px, 3)）。

你可以將 <dashed-function> 值作為常規 CSS 屬性值或屬性值元件包含在內，以便在需要根據函式邏輯動態計算值而不是提供靜態值的情況下使用。

在需要將包含逗號的值作為引數傳遞的情況下，你可以透過將其用大括號（{ }）括起來來實現。

示例

有關更多示例，請參閱我們的使用 CSS 自定義函式指南。

<dashed-function> 的基本用法

此示例展示了一個基本函式，它返回傳遞給它的顏色的半透明版本。

HTML

標記包含一個帶有文字內容的 <p> 元素。

<p>Some content</p>

CSS

在我們的樣式中，我們首先定義 CSS 自定義函式。該函式名為 --transparent，接受兩個引數：一個顏色和一個數字 alpha 通道值。在函式體內部，我們使用相對顏色語法將傳入的顏色轉換為一個 oklch() 顏色，其 alpha 通道等於傳入的 alpha 值；這成為函式的 result。

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

接下來，我們在 :root 元素上定義一個 --base-color 自定義屬性，其值為 #faa6ff。我們將該屬性指定為 <p> 元素的 border 顏色值，然後將其 background-color 值設定為相同顏色的透明版本。這是透過將值設定為 <dashed-function> 語法來實現的，指定 --transparent() 函式並向其傳遞 var(--base-color) 和 0.8 作為引數。

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

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

結果

規範

瀏覽器相容性

另見

• CSS 自定義屬性
• @function at-rule
• type() 函式
• 使用 CSS 自定義函式
• CSS 自定義函式與混入模組