sqrt()

CSS 函数 sqrt() 为指数型函数，返回某数的平方根。

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

语法

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

参数

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

x

解析为大于等于 0 的 <number> 的计算式。

返回值

返回 <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-constant>  |
  ( <calc-sum> )   

<calc-constant> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

根据平方根缩放尺寸

此示例展示了如何使用 sqrt() 函数计算尺寸。

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。
: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 值。

.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

参见