calc()

  • 版本:CSS3

语法:

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()时,乘法和除法可能无效;

示例:

关注编程学问公众号