sqrt()

基线 2023

最新可用

2023 年 12 月起,此功能在最新的设备和浏览器版本中都能正常使用。此功能可能在较旧的设备或浏览器中无法正常工作。

**sqrt()** CSS 函数 是一个指数函数,它返回一个数字的平方根

函数 pow(x, 0.5) 等价于 sqrt(x)

语法

css
/* A <number> value */
width: calc(100px * sqrt(9)); /*  300px */
width: calc(100px * sqrt(25)); /*  500px */
width: calc(100px * sqrt(100)); /* 1000px */

参数

sqrt(x) 函数仅接受一个值作为其参数。

x

一个计算结果为<number> 且大于或等于 0 的值。

返回值

返回一个<number>,它是 x 的平方根。

  • 如果 x+∞,则结果为 +∞
  • 如果 x0⁻,则结果为 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 */
}

然后将这些大小应用为选择器的 widthheight 值。

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 表格仅在浏览器中加载

另请参阅