hypot()

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

尽管 pow 和 sqrt 仅作用于无单位数值，然而 hypot() 可接受带单位的值，但是这些值须全部具有相同类型。

语法

/* <number> 值 */
width: hypot(2em); /* 2em */
width: hypot(3em, 4em); /* 5em */
width: hypot(30px, 40px); /* 50px */
width: hypot(48px, 64px); /* 80px */
width: hypot(3px, 4px, 5px); /* 7.0710678118654755px */

参数

hypot(x [, ...]#) 函数接受由逗号分隔的至少一个计算式作为其参数。

x、x2、……、xN

解析为 <number>、<dimension> 或 <percentage> 的计算式。

返回值

（根据输入）返回 <number>、<dimension> 或 <percentage>，为其参数平方和的平方根。

  • 若任一输入为 infinite，则结果为 +∞。
  • 若提供单个参数，则结果为其输入值的绝对值。hypot(2em) 和 hypot(-2em) 均解析为 2em。

形式语法

<hypot()> = 
  hypot( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>         |
  <dimension>      |
  <percentage>     |
  <calc-constant>  |
  ( <calc-sum> )   

<calc-constant> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

基于 hypot 函数的尺寸

此示例展示了如何使用 hypot() 函数计算尺寸。

HTML

<div class="boxes">
  <div class="box">100px</div>
  <div class="box one">100px</div>
  <div class="box two">141.42px</div>
  <div class="box three">250px</div>
</div>

CSS

此处使用 CSS 自定义属性定义待用尺寸。首先声明第一个尺寸（--size-0），再用此尺寸计算其他尺寸。

  • --size-1 所计算的为 --size-0（100px）的斜边长。将此值平方后——由于无其他值——返回此值的平方根，结果为 100px。
  • --size-2 所计算的为两个 --size-0（100px）的斜边长。将此值平方后（100px * 100px = 10000px2）再加上 --size-0 的平方（10000px2 + 10000px2 = 20000px2），返回和的平方根（√(20000px2)），结果为 141.42px。
  • --size-3 所计算的为 --size-0 * 1.5（150px）和 --size-0 * 2（200px）的斜边长。其结果为这些值的平方和的平方根——将这些值平方（22500px2 和 40000px2）后相加（62500px2），用所得到的和再开平方根，结果为 250px。
:root {
  --size-0: 100px;
  --size-1: hypot(var(--size-0)); /*  100px */
  --size-2: hypot(var(--size-0), var(--size-0)); /*  141.42px */
  --size-3: hypot(
    calc(var(--size-0) * 1.5),
    calc(var(--size-0) * 2)
  ); /*  250px */
}

再将这些尺寸应用于这些选择器的 width 和 height 值。

.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}

结果

规范

Specification
CSS Values and Units Module Level 4
# exponent-funcs

浏览器兼容性

BCD tables only load in the browser

参见