CSS заоблени ъгли - как да, генератори на граници на радиус

Реших на моя сайт да направя стандартни блокове в страничната лента със заоблени ъгли, използвайки CSS3. По-рано си спомням, че за да изпълнят тази задача, те нарисуваха отделни картини за всеки ъгъл и ги комбинираха с помощта на няколко DIV блока в HTML. За щастие сега всичко това лесно се определя в CSS стилове. За определени оформления и теми (като жени), CSS-подобното закръгляване изглежда много по-интересно от правите, строги линии.

Като цяло трябваше да се справя подробно с въпроса, да разбера какво е свойство border-radius, какви параметри могат да бъдат посочени в него и т.н. За да опростя задачата, дори намерих специални услуги - генератори на заоблени граници в CSS. За всичко това ще ви разкажа днес.

свойство border-radius

CSS свойствотоborder-radius се използва за създаване на кръгли блокове. Всъщност той задава радиуса на границата на елемента. Ако няма рамка, тогава се използва за фон. Работи и с фонови изображения.

Кодът за елементите в екранната снимка по-горе е:

Тоест за него могат да се задават от 1 до 4 параметъра (в пиксели или проценти).

Една стойност: за всички ъгли наведнъж;
Две: първата стойност за горния ляв и долния десен ъгъл, втората за горния десен и долния ляв;
Три: първата стойност за горния ляв ъгъл, втората за горния десен и долния десен, третата за долния десен ъгъл;
Четири: отговаря за ъглите в следната последователност - горе вляво, горе вдясно, долу вдясно, долу вляво (подобно на настройката на отстъпи).

Също така параметрите за заобляне на ъглите в CSS могат да бъдат зададени отделно за всеки от тях, като се използват съответните свойства:

граница-горе-ляво-радиус;
border-top-right-radius;
border-bottom-right-radius;
border-bottom-left-radius.

Освен това едно или две числа могат да се използват като параметър. В първия случай параметърът задава радиуса на заобляне около окръжността, във втория случай първо се получават хоризонталните и след това вертикалните радиуси на елипсоида.

За border-radius можете също да зададете кръгли ъгли под формата на елипсоид. В този случай се използва наклонена черта "/". Параметрите преди наклонената черта показват хоризонталния радиус, след - вертикалния. Например:

Поддръжка на Border-radius в браузърите

В таблицата по-долу можете да видите минималните версии на браузърите, от които са започнали да поддържат напълно свойството border-radius.

За ранните версии на Chrome, Safari, Firefox бяха използвани специални префикси за внедряване на CSS заоблени ъгли. За първите две това свойство е -webkit-border-radius, за последното -moz-border-radius. Ето как изглежда стиловият код с ранна поддръжка на браузъра:

CSS генератори със заоблени ъгли

В мрежата има различни услуги, които улесняват създаването на закръглена рамка в CSS. Може да ги използвате в работата си и първата част на статията ще ви позволи да разберете генерирания код. Намирането на тези проекти не е трудно, потърсете в Google ключовия генератор на радиус на границата. Ето няколко от най-интересните проекти:

Предлага максимален брой опции: цвят на фона, граници, както и прозрачност и сянка. Единственото нещо е, че крайният код се генерира под формата на HTML и ще трябва да „извлечете“ CSS стилове от него.

Също така, най-простата услуга за създаване на кръгли блокове в CSS. Удобно е, когато всичко това се изпълнява под формата на плъзгачи и външният вид на крайния блок се вижда веднага.

Инструмент сdeveloper.mozilla.org, където можете да промените формата на блока директно върху самия елемент. Много удобно и оригинално решение.

Вече говорих за CSS 3.0 Maker, има различни функции, включително border-radius. Генерираният код се поддържа от всички съвременни браузъри.

За всеки случай нося друг прост генератор, който ви позволява да правите заоблени ъгли, внезапно някоя от услугите по-горе няма да работи. Настройките тук са възможно най-прости, можете да изберете вида на рамката. Крайният код е универсален.

И каква е разликата между това, че ще направя зареждането с кода или генератора?

Андрей, нищо, генераторът дава същия код на изхода. Просто не се нуждаете от познания по CSS, за да го използвате (всичко се контролира чрез настройките).