Итак, что же меня восхищает в волшебном значении border-radius равному 9999px?
Всё очень просто и забавно одновременно: border-radius: 9999px построит вам прямоугольник со скруглёнными углами. В случае квадрата это будет, очевидно, круг.
Вот issue из обсуждений спецификации CSS WG: https://www.w3.org/Style/CSS/Tracker/issues/29
Сам автор issue говорит, что без
Там в целом геометрия эллипсов, потому описание формулы такое странное и учитываются все углы, но давайте просто посчитаем, что же получится для значения в 10000px (проще считать) и прямоугольника размером 320x240px, углы начинаем с верхнего левого (Top Left):
TL: 320/20000 vs 240/20000
TR: 320/20000 vs 240/20000
BR: 320/20000 vs 240/20000
BL: 320/20000 vs 240/20000
0.016 vs 0.012 в каждом случае
Итого, 0.012 — минимальное значение коэффициента приведения радиуса.
10000 * 0.012 = 120.
Половина высоты, выходит. Проверяем себя: https://codepen.io/alinaki/pen/jOxRwJJ
Вариант, когда значения радиуса индивидуальны, рассмотрен там же в спецификации.
Во Flutter используется геометрия кривых и понять это пусть всё ещё проще, чем структуру исходного кода Chromium, но всё равно сложно. Тем не менее, имеются упоминания, что радиусы приводятся к минимальному значению размерности.
И да, 9999px это совсем не то же, что 50%, опять же — смотрите спецификацию, там эллипсы. Но в случае квадрата — и там и там будет круг.
#geometry #borderradius #css #flutter