Генератор на border-radius

Како да го користите генераторот на border-radius

1. Повлечете ги точките на рабовите на прегледот. Секоја обоена точка го одредува хоризонталниот радиус на еден агол; кога е штиклирано Елиптични агли (8 вредности), белите точки ги одредуваат вертикалните радиуси.
2. Или внесете точни вредности во Агли: Горе лево, Горе десно, Долу десно и Долу лево, секој со поле Хоризонтално и поле Вертикално.
3. Изберете Единица: % (процент од кутијата) или px (пиксели). Префрлањето ги претвора тековните вредности, па обликот останува ист.
4. Подесете Ширина на кутијата (px) и Висина на кутијата (px) да одговараат на вашиот елемент и користете Сите агли за да ги заоблите сите агли одеднаш.
5. Пробајте ги Готови облици (Заоблен, Капсула, Круг, Лист, Капка, Јајце, Билет и три блоба) или кликнете Случаен блоб за органски облик.
6. Штиклирајте Одделни својства ако претпочитате четири посебни декларации border-*-radius, па копирајте го CSS код со Копирај.

Тастатура: фокусирајте точка и притиснете ги стрелките за да го менувате радиусот по еден чекор (10 со Shift).

Алатката работи во вашиот прелистувач. Ништо од внесеното не се испраќа на сервер.

Синтаксата на border-radius

border-radius прима од една до четири вредности, по редослед горе лево, горе десно, долу десно, долу лево. Како кај маргините, недостасувачките вредности се копираат од спротивниот агол: border-radius: 10px 20px ги заоблува горе лево и долу десно со 10px, а другите два со 20px. Алатката секогаш ја запишува најкратката еквивалентна форма.

Секој агол е всушност четвртина од елипса со два радиуса. Коса црта ги одвојува хоризонталните радиуси од вертикалните, што дава до осум вредности:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Пред косата црта: хоризонталните радиуси на четирите агли. По неа: вертикалните радиуси. Кога двете листи се еднакви, делот по косата црта се изоставува.

Пиксели или проценти?

• px дава иста кривина без оглед на големината на елементот. Тоа е правилниот избор за копчиња, картички и полиња за внес: border-radius: 8px.
• % е релативен на елементот: хоризонталните радиуси на неговата ширина, вертикалните на неговата висина. 50% го претвора квадратот во круг, а правоаголникот во елипса. Процентите се она што ги прави блобовите да се скалираат со елементот.

За копче во форма на капсула користете радиус во пиксели од најмалку половина од висината. Обликот Капсула го прави токму тоа за големината на кутијата што ја внесовте; работи и огромна вредност како 999px.

Кога соседните радиуси заедно се поголеми од страната што ја делат, прелистувачите ги намалуваат сите радиуси пропорционално додека не се собијат. Затоа повлекувањето на две точки една преку друга не го расипува обликот.

Блоб облици

Блоб обликот и Случаен блоб користат осум проценти кај кои двете точки на секоја страна заедно даваат 100 %. Кривините тогаш се совпаѓаат точно, а обликот изгледа како мазно камче. Анимирајте помеѓу два блоба со CSS transition на border-radius за ефект на „преобразување“.