Niestety, nie ma czegoś takiego jak zmienna PI w CSS.
Jednak ..
Ty może zrobić use of CSS variables przypisać numer do niego, minusem tego jest to, że ma really, really bad browser support.
To działa tak:
:root {
--PI: 3.14159265358979; // enter the amount of digits you wish to use
}
.circle {
width: calc(100 * var(--PI));
}
Najlepszym rozwiązaniem byłoby użycie preprocesora, takiego jak SASS lub Less, do przypisania zmiennej PI, co wyglądałoby jak Przykładem llowing w SASS:
$pi: 3.14159265358979 // amount of digits you wish to use
.circle {
width: calc(100 * ${pi});
}
EDIT: Jak wspomniano w komentarzach, niektóre przeglądarki (IE + Safari) zaokrąglić do 2 miejsc po przecinku, gdzie Chrome i Firefox może zaokrąglić w górę do (przynajmniej) 4 miejsc po przecinku.
Jako że Ouroborus wspomniał o przeglądarkach głównie zaokrąglających liczby do 2 cyfr po przecinku, nie ma sensu używać wartości innej niż 3.14, ale jeśli nie czujesz się z tym dobrze, dlaczego nie użyć po prostu '22/7' i pozwolić przeglądarce zdecydować, jak chce sobie poradzić? – Harry
Być może lepiej byłoby użyć JavaScript do tego zadania animacji: 'var intRadius = Math.floor (objCircle.offsetWidth/2)' –
"Równanie długości promienia okręgu to pi * d." - Chyba masz na myśli * obwód * – Danield