<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 自定义函数与混入模块