Разбиране на свойството CSS border-radius
Свойството border-radius в CSS контролира заоблянето на ъглите на даден елемент. Този инструмент позволява да се регулира заоблеността на ъглите на кутия, като се управлява всеки ъгъл поотделно или всички заедно чрез свързване. Четирите плъзгача за ъглите се напасват по посока на часовниковата стрелка, започвайки от горния ляв, преминавайки през горния десен, долния десен и завършвайки до долния ляв ъгъл. Първоначалната стойност на плъзгача е 24, което генерира код border-radius: 24px;.
Инструментът предлага следните контроли за управление на формата:
- Всички ъгли: Единствен плъзгач, който контролира четирите ъгъла едновременно, когато те са свързани.
- Горе вляво, Горе вдясно, Долу вдясно и Долу вляво: Четири отделни плъзгача, налични при изключена опция за свързване.
- Хоризонтално и Вертикално: Допълнителни плъзгачи за всеки ъгъл, които се активират в елиптичен режим.
Всички плъзгачи работят в диапазон от 0 до 100. Потребителят вижда визуален преглед на кутията с приложените промени в реално време, а под заглавието CSS се показва генерираният код, който може да бъде копиран с бутона Копиране на CSS.
Разлики между пиксели и проценти
Изборът на мерна единица променя начина, по който браузърът изчислява заоблянето на елемента. Инструментът позволява превключване между мерните единици "px" (пиксели) и "%" (проценти).
При избор на пиксели (px), ъгълът се заобля с фиксирана стойност, която остава постоянна независимо от размера на елемента. При избор на проценти (%), заоблянето се изчислява относително спрямо размерите на самата кутия. В този случай хоризонталният процент следва ширината на елемента, а вертикалният процент следва неговата височина. Това поведение е важно при адаптивния дизайн, където размерите на елементите се променят динамично спрямо екрана.
Създаване на базови форми и елиптични ъгли
Когато елиптичният режим е изключен, всеки ъгъл представлява четвърт кръг с един единствен радиус. В този режим заоблянето е симетрично по двете оси.
При активиране на елиптичния режим всеки ъгъл получава отделен хоризонтален и вертикален радиус. Това позволява създаването на по-меки и органични форми, наподобяващи петна. Когато елиптичният режим е включен, генераторът записва CSS кода във формат с две стойности, разделени с наклонена черта (напр. border-radius: 10px / 20px;). Когато ъглите станат отново правилни (кръгли), кодът автоматично се връща към кратката форма без наклонена черта.
Техники за перфектен кръг и форма на хапче
Специфични геометрични фигури могат да бъдат постигнати лесно чрез правилно комбиниране на мерните единици и стойностите на ъглите:
- Перфектен кръг: За да се превърне квадрат в перфектен кръг, трябва да се свържат всички ъгли, мерната единица да се превключи на проценти (%) и стойността да се зададе на 50%. При тази конфигурация четирите страни се заоблят точно до средата на кутията.
- Форма на хапче: Тази форма е подходяща за бутони. За да се постигне, се запазва мерната единица в пиксели (px) и плъзгачът за ъглите се издърпва отвъд половината от височината на бутона. По този начин страните остават напълно заоблени, независимо от промяната на ширината на елемента.
Използване на готови шаблони
Инструментът съдържа пет бързи бутона за шаблони, които задават предварително дефинирани стойности за заобляне:
- Остър: Премахва заоблянето, като нулира стойностите на всички ъгли.
- Заоблен: Задава стандартно леко заобляне на ъглите.
- Кръг: Настройва автоматично всички ъгли на 50% за бързо превръщане на квадрат в кръг.
- Петно: Активира елиптичния режим и задава асиметрични стойности за създаване на органична форма.
- Листо: Създава заострени противоположни ъгли, наподобяващи листо.
Обработка на данните и поверителност
Процесът по изчертаване и генериране на кода се извършва изцяло локално. Всеки ъгъл се изчертава директно във Вашия браузър. Нищо от това, което настройвате тук, не се изпраща към BroBroGo.
Често задавани въпроси
Как работят четирите ъгъла и разликата между px и %?
Четирите плъзгача съответстват по посока на часовниковата стрелка на горния ляв, горния десен, долния десен и долния ляв ъгъл. В пиксели ъгълът се заобля с фиксирана стойност; в проценти се заобля спрямо кутията — хоризонталният процент следва ширината, а вертикалният процент следва височината, така че 50% превръща квадрата в кръг.
Какво прави елиптичният режим?
Когато е изключен, всеки ъгъл е четвърт кръг с един радиус. Включете го и всеки ъгъл ще получи отделен хоризонтален и вертикален радиус, с което се създават меки, органични форми на „петна“ (blobs). Генераторът записва формата с две стойности, разделени с наклонена черта, и се връща към кратката форма, когато ъглите отново станат кръгли.
Как да направя перфектен кръг или форма на хапче?
Свържете ъглите, превключете на проценти и задайте 50%: квадратът ще стане кръг. За бутон с форма на хапче запазете пикселите и плъзнете някой ъгъл отвъд половината от височината на бутона — страните ще останат напълно заоблени при всяка ширина. Готовият шаблон „Кръг“ настройва първия случай с едно щракване.