sqrt()
语法
css
/* A <number> value */
width: calc(100px * sqrt(9)); /* 300px */
width: calc(100px * sqrt(25)); /* 500px */
width: calc(100px * sqrt(100)); /* 1000px */
参数
返回值
返回一个<number>
,它是 x
的平方根。
- 如果
x
为+∞
,则结果为+∞
。 - 如果
x
为0⁻
,则结果为0⁻
。 - 如果
x
小于0
,则结果为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 值和单位模块级别 4 # exponent-funcs |
浏览器兼容性
BCD 表格仅在浏览器中加载