Функция sqrt()

Стилевая функция sqrt() возвращает квадратный корень заданного числа. К примеру, sqrt(4) возвращает число 2.

Для вычисления корня числа также можно использовать функцию pow(), которая возводит число в заданную степень.

sqrt(4) = pow(4, 0.5) = 2

sqrt() считает только квадратный корень, для вычисления кубических корней также может использоваться функция pow().

pow(8, 1/3) = 2

sqrt() работает только с числами, для использования с единицами CSS, такими как px, em, rem и др. можно воспользоваться функцией calc():

font-size: calc(1rem * sqrt(16)); /* 1rem × 4 = 4rem */

Синтаксис

sqrt(<число>);

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

В качестве значения применяется число больше или равное нулю (x ≥ 0). Если указанное число отрицательное (например: sqrt(-4)), то функция вернёт NaN.

В значении sqrt() допустимо использовать следующие знаки математических операций:

сложение (+) — sqrt(8 + 8);
вычитание (-) — sqrt(66 - 2);
умножение (*) — sqrt(32 * 2);
деление (/) — sqrt(18 / 2).

Пример

Код примера скопирован в буфер

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>sqrt()</title>
  <style>
   .img { 
    height: auto; /* Автоматическая высота */
    width: calc(1rem * sqrt(var(--k))); /* Ширина картинки */
   }
   .large { --k: 81; }
   .medium { --k: 49; }
   .small { --k: 25; }
  </style>
 </head>
 <body>
  <img src="image/heart.svg" alt="" class="img large">
  <img src="image/heart.svg" alt="" class="img medium">
  <img src="image/heart.svg" alt="" class="img small">
 </body>
</html>