CSS hypot() 函数

定义和用法

CSS 的 hypot() 函数返回其参数平方和的平方根。

返回值通过公式 sqrt(x1*x1 + x2*x2 + x3*x3 .... xn*xn) 计算。

hypot() 函数接受带单位的数值，但所有值的单位必须相同。

实例

使用 hypot() 设置元素的宽度：

div.a {
  width: hypot(80px); /* 80px */
}

div.b {
  width: hypot(40px, 80px); /* 89,44px */
}

div.c {
  width: hypot(40px, 80px, 100px); /* 134,16 */
}

div.d {
  width: hypot(40px, 80px, 100px, 120px); /* 180 */
}

div.e {
  width: hypot(10%, 20%, 40%); /* 45,82% */
}

亲自试一试

CSS 语法

hypot(x1, x2, x3, ...)

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

参考：CSS acos() 函数

参考：CSS asin() 函数

参考：CSS atan2() 函数

参考：CSS calc() 函数

参考：CSS cos() 函数

参考：CSS exp() 函数

参考：CSS hypot() 函数

参考：CSS log() 函数

参考：CSS mod() 函数

参考：CSS pow() 函数

参考：CSS sin() 函数

参考：CSS sqrt() 函数

参考：CSS tan() 函数