sign()
sign() CSS 函数包含一个计算，如果参数的数值为负，则返回-1；如果参数的数值为正，则返回+1；如果参数的数值为0⁺，则返回0⁺；如果参数的数值为0⁻，则返回0⁻。
注意： abs()返回参数的绝对值，而sign()返回参数的符号。
语法
css
/* property: sign( expression ) */
top: sign(20vh - 100px);
参数
sign(x)函数只接受一个值作为其参数。
x-
解析为数字的计算。
返回值
表示A符号的数字
- 如果
x为正，返回1。 - 如果
x为负，返回-1。 - 如果
x为正零，返回0。 - 如果
x为负零，返回-0。 - 否则，返回
NaN。
正式语法
<sign()> =
sign( <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
示例
背景图像位置
例如，在background-position中，如果背景图像大于背景区域，正百分比会解析为负长度，反之亦然。因此，sign(10%)可能会返回1或-1，具体取决于百分比如何解析！（如果它针对零长度解析，甚至可能返回0。）
css
div {
background-position: sign(10%);
}
位置方向
另一个用例是控制元素的position。可以是正值也可以是负值。
css
div {
position: absolute;
top: calc(100px * sign(var(--value)));
}
规范
| 规范 |
|---|
| CSS 值和单位模块第 4 级 # sign-funcs |
浏览器兼容性
加载中…