hypot()

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

hypot() CSS 函数是一个指数函数，它返回其参数的平方和的平方根。

pow() 和 sqrt() 只作用于无单位数字，而 hypot() 接受带单位的值，但它们都必须具有相同的类型。

语法

css

/* A <number> value */
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-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 = 10000px²），然后再次加上 --size-0 的平方（10000px² + 10000px² = 20000px²），并返回该和的平方根（√(20000px²)），结果是 141.42px。
--size-3 是通过斜边 --size-0 * 1.5 (150px) 和 --size-0 * 2 (200px) 计算的。结果是它们平方和的平方根：这些值被平方（22500px² 和 40000px²）并相加（62500px²），然后对和开平方（√(62500px²)），结果是 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 */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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);
}

结果

规范

规范
CSS 值和单位模块第 4 级 # 指数函数

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 10 月 10 日修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题