CSS-функция `sqrt()`

sqrt() — CSS-функция, представляющая собой экспоненциальную функцию, которая возвращает квадратный корень числа.

Функция pow(x, 0.5) эквивалентна sqrt(x).

Синтаксис

/* 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 равно +∞, результатом будет +∞.
• Если x равно 0⁻, результатом будет 0⁻.
• Если x меньше 0, результатом будет NaN.

Формальный синтаксис

<sqrt()> = 
  sqrt( <calc-sum> )

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<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 */
}

.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 селекторов.

.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);
}

Результат

Спецификации

Совместимость с браузерами

См. также

• pow()
• hypot()
• log()
• exp()