abs()

有限可用性

此功能不是基线,因为它在一些最常用的浏览器中无法正常工作。

abs() CSS 函数 返回参数的绝对值,类型与输入相同。

语法

css
/* property: abs(expression) */
width: abs(20% - 100px);

参数

abs(x) 函数只接受一个值作为其参数。

x

解析为数字的计算。

返回值

x 的绝对值。

  • 如果 x 的数值为正数或 0⁺,则返回 x
  • 否则,返回 -1 * x

正式语法

<abs()> = 
abs( <calc-sum> )

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

示例

正变量

abs() 函数可用于确保值始终为正数。在以下示例中,CSS 自定义属性 --font-size 用作 font-size 的值。将此自定义属性包装在 abs() 中会将负值转换为正值。

css
h1 {
  font-size: abs(var(--font-size));
}

控制渐变角度或方向

您还可以使用 abs() 函数控制渐变方向。在以下示例中,角度为 -45deg 时,渐变将从红色开始过渡到蓝色。通过使用 abs() 将值变为正数,渐变将从蓝色开始过渡到红色。

css
div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}

向后兼容回退

在不支持 CSS abs() 函数的旧浏览器中,您可以使用 CSS max() 函数来实现相同的结果,如下所示

css
p {
  line-height: max(var(--lh), -1 * var(--lh));
}

我们使用 max() 函数从两个值列表中返回最大的(最正)值:var(--lh)-1 * var(--lh)。无论 --lh 是正数还是负数,计算后的返回值始终为正数,即绝对数。

规范

规范
CSS 值和单位模块级别 4
# sign-funcs

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见