abs()
语法
css
/* property: abs(expression) */
width: abs(20% - 100px);
参数
abs(x)
函数只接受一个值作为其参数。
x
-
解析为数字的计算。
返回值
x
的绝对值。
- 如果
x
的数值为正数或0⁺
,则返回x
。 - 否则,返回
-1 * x
。
正式语法
示例
正变量
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 值和单位模块级别 4 # sign-funcs |
浏览器兼容性
BCD 表格仅在浏览器中加载