Како функционира алатката за прилагодување на аглите
Овој генератор ви овозможува лесно да ја прилагодите заобленоста на аглите на една рамка. Алатката нуди целосна контрола врз дизајнот, овозможувајќи ви да го контролирате секој агол поединечно или да ги поврзете сите заедно за рамномерно заоблување. Притоа, можете да изберете меѓу пиксели или проценти како мерни единици.
За понапредни дизајни, алатката нуди и елиптичен режим кој создава помеки, пооргански форми преку дефинирање на посебен хоризонтален и вертикален радиус за секој агол. Додека ги правите овие прилагодувања, алатката инстантна генерира соодветен CSS-код кој е веднаш подготвен за употреба во вашите проекти.
Почетната вредност на лизгачот е поставена на 24, што резултира со почетен код border-radius: 24px;.
Контроли и опции за внесување податоци
Алатката нуди неколку интуитивни контроли за прецизно обликување на рамката:
- Лизгачи: Се користат за прилагодување на заобленоста на аглите во опсег од 0 до 100.
- Кога опцијата „Поврзи ги сите агли“ е вклучена, достапен е само еден лизгач со ознака „Сите агли“ кој ги контролира сите четири агли истовремено.
- Кога аглите се исклучени од поврзувањето, на располагање имате четири лизгачи со ознаки „Горе лево“, „Горе десно“, „Долу десно“ и „Долу лево“. Четирите лизгачи се мапираат во насока на стрелките на часовникот.
- Доколку го активирате елиптичниот режим, секој агол дополнително добива посебни лизгачи за „Хоризонтално“ и „Вертикално“ прилагодување.
- Избор на единица: Прекинувач кој овозможува менување на мерната единица меѓу „px“ (пиксели) и „%“ (проценти).
- Поврзи ги сите агли: Прекинувач за истовремено контролирање на сите агли или за нивно поединечно прилагодување.
- Елиптични агли: Прекинувач за вклучување или исклучување на елиптичниот режим на работа.
- Претпоставки: Брзи копчиња за инстантни форми со ознаки „Остро“, „Заоблено“, „Круг“, „Дамка“ и „Лист“.
Визуелен приказ и генериран CSS-код
Резултатите од вашите прилагодувања се прикажуваат во реално време преку следните излезни елементи:
- Преглед: Визуелна репрезентација на рамката која веднаш ги рефлектира промените на применетиот border radius.
- CSS: Генерираниот CSS-код кој се прикажува под заглавието „CSS“.
- Копирај CSS: Копче со ознака „Копирај CSS“ кое овозможува брзо зачувување на кодот во вашиот клипборд.
Правила на заоблување и специфични форми
При користење на алатката, важат следните правила и специфики за однесувањето на CSS својствата:
- Пиксели наспроти проценти: Кога користите пиксели, аголот се заоблува за фиксна вредност. Кога користите проценти, заоблувањето е релативно во однос на димензиите на рамката — хоризонталниот процент ја следи ширината, додека вертикалниот процент ја следи висината на елементот.
- Елиптичен режим: Кога елиптичниот режим е исклучен, секој агол претставува четвртина круг со еден радиус. Кога е вклучен, секој агол добива посебен хоризонтален и вертикален радиус. Во овој режим, генераторот го запишува CSS-кодот во форма со две вредности поделени со коса црта, а се враќа на кратката форма кога аглите повторно ќе станат кружни.
- Совршен круг: За да направите совршен круг од квадратен елемент, потребно е да ги поврзете аглите, да префрлите на проценти и да поставите вредност од 50%. Претпоставката со име „Круг“ автоматски ги поставува сите агли на 50%.
- Копче во форма на пилула: За да дизајнирате копче во форма на пилула, задржете ги пикселите како единица и повлечете го лизгачот за аголот над половина од висината на копчето. На овој начин, страните ќе останат целосно заоблени без разлика на ширината на елементот.
Приватност и обработка на податоците
Вашата приватност е целосно заштитена при користење на оваа алатка. Секој агол се исцртува директно во Вашиот прелистувач. Ништо од она што го поставувате тука не се испраќа на BroBroGo.
Често поставувани прашања (FAQ)
Како функционираат четирите агли и изборот меѓу px и %?
Четирите лизгачи одговараат, во насока на стрелките на часовникот, на горе-левиот, горе-десниот, долу-десниот и долу-левиот агол. Во пиксели, аголот се заоблува за фиксна вредност; во проценти, тој се заоблува во однос на рамката — хоризонталниот процент ја следи ширината, а вертикалниот процент ја следи висината, па 50% го претвора квадратот во круг.
Што прави елиптичниот режим?
Кога е исклучено, секој агол е четвртина круг со еден радиус. Вклучете го и секој агол добива посебен хоризонтален и вертикален радиус, со што се создаваат меки, органски форми на „дамка“ (blob). Генераторот ја запишува формата со две вредности поделени со коса црта и се враќа на кратката форма штом аглите повторно ќе станат кружни.
Како да направам совршен круг или пилула?
Поврзете ги аглите, префрлете на проценти и поставете 50%: квадратот станува круг. За заоблено копче во форма на пилула, задржете ги пикселите и повлечете го аголот над половина од висината на копчето — страните ќе останат целосно заоблени при секоја ширина. Претпоставката „Круг“ го поставува првиот случај со еден клик.