hypot()

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

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

语法

css
/* <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 [, ...]#) 函数接受由逗号分隔的至少一个计算式作为其参数。

xx2、……、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-keyword> |
( <calc-sum> )

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

示例

基于 hypot 函数的尺寸

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

HTML

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。
css
: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 */
}

再将这些尺寸应用于这些选择器的 widthheight 值。

css
.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

参见