hypot()

基线 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 = 10000px2)，并将其添加到 --size-0 的平方 (10000px2 + 10000px2 = 20000px2)，并返回总和的平方根 (√(20000px2))，结果为 141.42px。
  • --size-3 使用 --size-0 * 1.5 (150px) 和 --size-0 * 2 (200px) 的斜边计算。结果是其平方和的平方根：这些值被平方 (22500px2 和 40000px2) 并加在一起 (62500px2)，总和的平方根 (√(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 */
}

然后，这些大小将作为选择器的 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
# exponent-funcs

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅