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