CSS 資料型別 - <calc-constant>

CSS <calc-constant> 資料型別定義了可在 CSS 計算中使用的預定義數學常量，例如 e 和 pi。為方便起見，CSS 直接提供了一些數學常量，幫助作者避免鍵入許多數字或手動計算它們。

可能的值

e - 自然對數的數學常數，近似等於 2.7182818284590452354
pi - 表示圓的周長與其直徑之比。近似等於 3.1415926535897932
infinity & -infinity - 無限值。表示最大或最小可能值。
NaN - 表示“非數字”的規範大小寫的值。

語法

<calc()> = e | pi | infinity | -infinity | NaN;

備註

在calc()中序列化引數時，它遵循 IEEE-754 浮點數學標準，考慮涉及常量（如infinity和NaN）的情況。

除以零時將返回無限值。根據分子的值，它將是正無窮大或負無窮大。
如果將無窮大與任何東西相加、相減或相乘，結果將是無窮大，除非得到 NaN。
任何包含至少一個 NaN 引數的操作，例如 0/0、infinity/infinity、0*infinity、infinity + (-infinity) 和 infinity - infinity，都將導致 NaN。
可能的值包括正零和負零 (0⁺ 和 0⁻)。這會導致以下效果
- 乘法或除法結果為 0，且只有一個負引數（例如，-5 * 0 或 1 / (-infinity)），或者其他數學函式的負結果將導致 0⁻。
- 0⁻ + 0⁻ 或 0⁻ - 0 將導致 0⁻。任何結果為零的加法或減法都將導致 0⁺。
- 將 0⁻ 與正數（包括 0⁺）相乘或相除會導致負結果（0⁻ 或 -infinity），但將 0⁻ 與負數相乘或相除會導致正結果。

除 NaN 外，所有常量都不區分大小寫，因此 calc(Pi)、calc(E) 和 calc(InFiNiTy) 均有效。

e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN

以下是所有無效常量

nan
Nan
NAN

CSS <calc-constant> - 在 calc() 中使用 e 和 pi

以下示例演示了在calc()中使用e進行指數旋轉以及在sin()函式中使用pi：

<html>
<head>
<style>
   .container {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
   }
   .box {
      display: flex;
      flex-direction: column;
      align-items: left;
      width: 200px;
   }
   .box > div {
      width: 100px;
      height: 100px;
      margin: 10px;
   }
   span {
      font-family: monospace;
      font-size: 0.8em;
   }
   .e-box {
      background-color: red;
   }
   .pi-box {
      background-color: red;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <label for="e-slider">e:</label>
         <input type="range" min="0" max="5" step="0.01" value="0" class="e-slider" />
         <span class="e-value"></span>
         <div class="e-box"></div>
      </div>
      <div class="box">
         <label for="pi-slider">pi:</label>
         <input type="range" min="0" max="1" step="0.01" value="0" class="pi-slider" />
         <span class="pi-value"></span>
         <div class="pi-box"></div>
      </div>
   </div>  
   <script>
      const eSliderElements = document.querySelectorAll(".e-slider");
      const piSliderElements = document.querySelectorAll(".pi-slider");

      const eValueElements = document.querySelectorAll(".e-value");
      const piValueElements = document.querySelectorAll(".pi-value");

      eSliderElements.forEach(function (eSlider, index) {
         eSlider.addEventListener("input", function () {
         document.querySelectorAll(".e-box")[index].style.transform = "rotate(calc(1deg * pow(" + this.value + ", e)))";
         eValueElements[index].textContent = document.querySelectorAll(".e-box")[index].style.transform;
         });
      });

      piSliderElements.forEach(function (piSlider, index) {
         piSlider.addEventListener("input", function () {
         document.querySelectorAll(".pi-box")[index].style.rotate = "calc(sin(" + this.value + " * pi) * 100deg)";
         piValueElements[index].textContent = document.querySelectorAll(".pi-box")[index].style.rotate;
         });
      });
   </script>
</body>
</html>

CSS <calc-constant> - 無窮大、NaN 和除以零

以下示例演示了除以零時計算的寬度值，以及在控制檯中序列化時不同calc()常量的外觀：

<html>
<head>
<style>
   div {
      height: 100px;
      background-color: blue;
      width: calc(1px / 0);
   }
</style>
</head>
<body>
   <div></div>
   <script>
      const divElement = document.querySelector("div");
         document.write(divElement.offsetWidth);    // infinity clamped to largest value for width
         document.write("<br><br>");

         // Function to set the width,
      const logSerializedWidth = value => {
         divElement.style.width = value;     // Set the width of the div using the provided value
         document.write(divElement.style.width);    // Display the serialized width
         document.write("<br><br>");
      };

      // Call the function with different calculations
      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)    
   </script>
</body>
</html>

列印頁面