calc()

語法:

calc() = calc(四則運算)

說明:

用於動態計算長度值。
  • 需要注意的是,運算符前後都需要保留一個空格,例如:width: calc(100% - 10px)
  • 任何長度值都可以使用calc()函數進行計算;
  • calc()函數支援 "+", "-", "*", "/" 運算;
  • calc()函數使用標准的數學運算優先級規則;

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 2.0-3.6 4.0-18.0 3.1-5.1 15.0+ 3.2-5.1 2.1-4.3 18.0
9.0 #1 4.0-15.0
-moz-
19.0-25.0
-webkit-
6.0
-webkit-
6.0-6.1
-webkit-
4.4-4.4.4 #2 19.0-25.0
-webkit-
10.0+ 16.0+ 26.0+ 6.1+ 7.0+ 26.0+
  1. 當在 background-position中使用calc()時將會導致瀏覽器崩潰;
  2. 部分版本在使用calc()時,乘法和除法可能無效;

示例: