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, ...)
值 描述
x1, x2, x3, ... 必需。一個或多個逗號分隔的值。

技術細節

版本： CSS4

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

相關頁面

參考：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() 函數