sqrt()

Baseline 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: 一個計算結果為大於或等於 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-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 */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

然後將這些大小作為選擇器的 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 級 # 指數函式

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 2025 年 10 月 10 日，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題