语法
css
/* <number> 值 */
width: calc(100px * sqrt(9)); /* 300px */
width: calc(100px * sqrt(25)); /* 500px */
width: calc(100px * sqrt(100)); /* 1000px */
参数
sqrt(x) 函数仅接受一值作为其参数。
返回值
返回 <number>，为 x 的平方根。
- 若
x为+∞，则结果为+∞。 - 若
x为0⁻，则结果为0⁻。 - 若
x小于0，则结果为NaN。
形式语法
<sqrt()> =
sqrt( <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
示例
根据平方根缩放尺寸
此示例展示了如何使用 sqrt() 函数计算尺寸。
HTML
html
<div class="boxes">
<div class="box">50px</div>
<div class="box one">100px</div>
<div class="box two">150px</div>
<div class="box three">200px</div>
</div>
CSS
此处使用 CSS 自定义属性定义待用尺寸。首先声明第一个尺寸（--size-0），再用此尺寸计算其他尺寸���
--size-1所计算的为--size-0的值（50px）乘以 4 的平方根（2），结果为 100px。--size-2所计算的为--size-0的值（50px）乘以 9 的平方根（3），结果为 150px。--size-3所计算的为--size-0的值（50px）乘以 16 的平方根（4），结果为 200px。
css
:root {
--size-0: 50px;
--size-1: calc(var(--size-0) * sqrt(4)); /* 100px */
--size-2: calc(var(--size-0) * sqrt(9)); /* 150px */
--size-3: calc(var(--size-0) * sqrt(16)); /* 200px */
}
再将这些尺寸应用于这些选择器的 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 Values and Units Module Level 4 # exponent-funcs |