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 |
瀏覽器相容性
載入中…