Генератор на CSS кръгове — 50% радиус на границата
Проектирайте CSS border-radius визуално: четири независими ъглови плъзгача в пиксели или проценти, пряк път за свързване на всички ъгли за незабавни кръгове и хапчета, плюс органичен режим на петна с произволни форми.
Резултат
Тази страница отваря генератора на радиус на границата с четирите свързани ъгъла и зададени на 50%, стойността, която превръща кутия в кръг, използвайки само CSS. Честно казано: на квадратна кутия това прави перфектен кръг, но на правоъгълна кутия същите 50% вместо това произвеждат елипса, подобна на стадион, тъй като всеки ъгъл закръгля само своята собствена четвърт.
Това разграничение има значение, тъй като 50% border-radius е единственият най-разпространен начин за изграждане на кръгли аватари, значки с икони и точки за състояние в CSS – много по-лесно от изрязването на кръг с маска или рисуването на такъв в SVG, и остава ясен при всякакъв размер, тъй като е относителен процент, а не фиксиран радиус на пикселите.
Превключете полето на фиксиран квадратен размер във вашия собствен CSS, за да заключите идеалния кръг, или го оставете правоъгълно нарочно за форма, подобна на хапче – така или иначе ъглите остават свързани тук, така че един плъзгач поддържа всичките четири синхронизирани, докато копирате получения CSS.