<calc-keyword>
Baseline 廣泛可用 *
<calc-keyword> CSS 資料型別表示定義明確的常量，例如 e 和 pi。CSS 直接提供其中一些常量，以方便作者，而無需作者手動輸入這些數學常量的多個數字或自行計算。
語法
<calc-keyword> 型別定義了可在 CSS 數學函式中使用的數字常量。
值
e-
自然對數的底數，約等於
2.7182818284590452354。 pi-
圓的周長與直徑之比，約等於
3.1415926535897932。 infinity和-infinity-
無限值，用於表示最大/最小可能值。
NaN-
表示“非數字”的規範大小寫的值。
注意
對 calc() 內部引數的序列化遵循 IEEE-754 浮點數學標準，這意味著在處理 infinity 和 NaN 等常量時需要注意一些情況。
-
除以零將返回正無窮大或負無窮大，具體取決於分子的符號。
-
將
infinity加、減或乘以任何值都將返回infinity，除非它產生NaN（見下文）。 -
任何至少有一個
NaN引數的運算都將返回NaN。這意味著0 / 0、infinity / infinity、0 * infinity、infinity + (-infinity)和infinity - infinity都將返回NaN。 -
正負零是可能的值（
0⁺和0⁻）。這會產生以下影響：- 乘法或除法運算，如果產生零且恰好有一個負引數（
-5 * 0或1 / (-infinity)），或者其他數學函式中的組合產生負結果，則將返回0⁻。 0⁻ + 0⁻或0⁻ - 0將返回0⁻。所有其他會產生零的加法或減法將返回0⁺。- 將
0⁻乘以或除以正數（包括0⁺）將返回負結果（0⁻或-infinity），而將0⁻乘以或除以負數將返回正結果。
- 乘法或除法運算，如果產生零且恰好有一個負引數（
這些規則如何應用的示例顯示在無窮大、NaN 和除以零部分。
注意：在 calc() 中使用 infinity 作為引數的情況很少見，但它可以用於避免硬編碼的“魔術數字”或確保某個值始終大於另一個值。如果您需要明確表示某個屬性具有該資料型別的“最大可能值”，這可能會很有用。
正式語法
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
描述
數學常量只能在 CSS 數學函式內部用於計算。數學常量不是 CSS 關鍵字，但如果它們在計算之外使用，則它們會被視為任何其他關鍵字。例如：
animation-name: pi;指的是名為“pi”的動畫，而不是pi數字常量。line-height: e;無效，但line-height: calc(e);有效。rotate(1rad * pi);不起作用，因為rotate()不是數學函式。使用rotate(calc(1rad * pi));。
在數學函式中，<calc-keyword> 值被評估為 <number> 值，因此 e 和 pi 作為數字常量。
infinity 和 NaN 略有不同，它們被視為退化的數字常量。雖然它們在技術上不是數字，但它們充當 <number> 值，因此要獲得一個無限的 <length>，例如，需要一個像 calc(infinity * 1px) 這樣的表示式。
包含 infinity 和 NaN 值主要是為了使序列化更簡單和更明顯，但可以用於指示“最大可能值”，因為無限值會被鉗制到允許的範圍。這種情況很少合理，但當使用 infinity 時，它比在樣式表中放置一個巨大的數字或硬編碼魔術數字要簡單得多。
除 NaN 外，所有常量均不區分大小寫，因此 calc(Pi)、calc(E) 和 calc(InFiNiTy) 均有效。
e -e E pi -pi Pi infinity -infinity InFiNiTy NaN
以下所有情況均無效：
nan Nan NAN
示例
在 calc() 中使用 e 和 pi
以下示例展示瞭如何在 calc() 中使用 e 以指數遞增的角度旋轉元素。第二個框展示瞭如何在 sin() 函式中使用 pi。
<div id="wrapper">
<div class="container">
<div id="e"></div>
<input type="range" min="0" max="7" step="0.01" value="0" id="e-slider" />
<label for="e-slider">e:</label>
<span id="e-value"></span>
</div>
<div class="container">
<div id="pi"></div>
<input type="range" min="0" max="1" step="0.01" value="0" id="pi-slider" />
<label for="pi-slider">pi:</label>
<span id="pi-value"></span>
</div>
</div>
// sliders
const eInput = document.querySelector("#e-slider");
const piInput = document.querySelector("#pi-slider");
// spans for displaying values
const eValue = document.querySelector("#e-value");
const piValue = document.querySelector("#pi-value");
eInput.addEventListener("input", function () {
e.style.transform = `rotate(calc(1deg * pow(${this.value}, e)))`;
eValue.textContent = e.style.transform;
});
piInput.addEventListener("input", function () {
pi.style.rotate = `calc(sin(${this.value} * pi) * 100deg)`;
piValue.textContent = pi.style.rotate;
});
無窮大、NaN 和除以零
以下示例展示了除以零時 width 屬性的計算值，以及在控制檯中檢視不同 calc() 常量進行序列化後的結果。
<div></div>
div {
height: 50px;
background-color: red;
width: calc(1px / 0);
}
const div = document.querySelector("div");
console.log(div.offsetWidth); // 17895698 (infinity clamped to largest value for width)
function logSerializedWidth(value) {
div.style.width = value;
console.log(div.style.width);
}
logSerializedWidth("calc(1px / 0)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px / -0)"); // calc(-infinity * 1px)
logSerializedWidth("calc(1px * -infinity * -infinity)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px * -infinity * infinity)"); // calc(-infinity * 1px)
logSerializedWidth("calc(1px * (NaN + 1))"); // calc(NaN * 1px)
規範
| 規範 |
|---|
| CSS 值和單位模組第 4 級 # typedef-calc-keyword |
瀏覽器相容性
載入中…