sqrt()

Базовая версия 2023

Новое

С декабря 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

Функция 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> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  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);
}

Результат

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

Спецификация
CSS Значения и единицы Модуль уровня 4 # exponent-funcs

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

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`sqrt`	120	120	118	106	15.4	120	118	80	15.4	25.0	120

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/sqrt