hypot()
Baseline 2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
语法
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 [, ...]#)
函数接受由逗号分隔的至少一个计算式作为其参数。
x
、x2
、……、xN
-
解析为
<number>
、<dimension>
或<percentage>
的计算式。
返回值
(根据输入)返回 <number>
、<dimension>
或 <percentage>
,为其参数平方和的平方根。
- 若任一输入为
infinite
,则结果为+∞
。 - 若提供单个参数,则结果为其输入值的绝对值。
hypot(2em)
和hypot(-2em)
均解析为2em
。
形式语法
示例
基于 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 */
}
再将这些尺寸应用于这些选择器的 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);
}
结果
规范
Specification |
---|
CSS Values and Units Module Level 4 # exponent-funcs |
浏览器兼容性
BCD tables only load in the browser