語法
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 級 # 指數函式 |
瀏覽器相容性
載入中…