Радиусът на границата създава заоблени ъгли с CSS

Прекрасното свойствоCSS3 border-raduis улеснява създаването назаоблени ъгли без използване на изображения или допълнителни тагове div. Това е едно от най-полезните и обсъждани свойства на CSS3.

От първото съобщение през 2005 г. свойствотоborder radius се поддържа от почти всички съвременни браузъри (макар и с някои функции, които ще бъдат обсъдени по-долу). И поради лекотата на използване, уеб разработчикът може лесно да приложи тази технология в своите проекти.

Ще дам прост пример:

На теория кодът за този пример е много прост:

Въпреки това, не всичко е толкова просто. За съвместимост с Firefox трябва да използвате префикса -moz- (прочетете раздела за поддръжка на браузъра,moz border radius за това):

Как работи

Има два начина. Заоблени ъгли могат да бъдат създадени индивидуално за всеки ъгъл с помощта на свойството border-*-radius (border-bottom-left-radius, border-top-left-radius и т.н.) или с помощта на свойството border-radius по-късо.

Нека първо да разгледаме как да използваме свойството border-*-radius за създаване на отделни ъгли, а след това ще разгледаме краткия аналог на border-radius.

граница-долу-вляво-радиус, граница-долу-вдясно-радиус, граница-горе-ляв-радиус, граница-горе-вдясно-радиус

Като радиус можете да посочите всяка възможна стойност за CSS (px, cm, in, em и т.н.), както и проценти (в този случай радиусът на закръгляване се изчислява от ширината на блока).

Като радиус можете да посочите всяка възможна стойност за CSS (px, cm, in, em и т.н.), както и проценти (в този случай радиусът на закръгляване се изчислява от ширината на блока).

Синтаксис:

Пример:

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

Ако е зададена само една стойност, тогава тя дефинира както хоризонталния, така и вертикалния радиус.

Фигурата показва няколко примера за различни стойности и съответните им ъгли:

Ако някоя стойност е равна на нула, тогава ъгълът ще бъде квадратен, а не кръгъл.

граница-радиус

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

Синтаксис:

Пример:

Първият набор от стойности (1-4) определя хоризонталните радиуси за четирите ъгъла. Незадължителният втори набор от стойности, зададен след наклонената черта, определя вертикалните радиуси за четирите ъгъла. Ако е посочен само един набор от стойности, тогава той се използва еднакво за определяне на вертикални и хоризонтални ъгли.

Ако и четирите стойности са посочени, те са съответно горният ляв, горният десен, долният десен и долният ляв радиус. Ако долният ляв е пропуснат, той приема стойността на горния десен. Ако долният десен е пропуснат, тогава той приема стойността на горния ляв. И ако е посочена само една стойност, тогава тя се използва за всичките четири радиуса едновременно.

Поддръжка на браузър

Понастоящем Opera (версия 10.5 и по-нова), Safari (версия 5 и по-нова), Chrome (версия 5 и по-нова) поддържат както свойствата border-radius, така и индивидуалните свойства border-*-radius, описани в текущата спецификация на W3C (въпреки че все още има много дребни грешки и несъответствия, като преходни граници, използване на проценти по дължина и т.н.).

Mozilla Firefox (версия 1.0 и по-нова) поддържа свойството border-radius с префикса -moz-, въпреки че има някои несъответствия между изпълнението на Mozilla и текущата спецификация на W3C (повече за това по-долу).

Последните версии на браузъра Firefox разбират border-radius без префикса -moz-.

Safari и Chrome (както и други браузъри, базирани на двигателя на webkit) поддържат border-radius с префикса -webkit- от версия 3 (префиксът вече не е необходим от версия 5), но също и с някои отклонения от текущата спецификация.

Internet Explorer 9 поддържа свойствотоborder radius по абсолютно същия начин.

Префикс -moz-

От версия 1 браузърът Mozilla Firefox поддържа свойството border-radius с префикса -moz-. Браузърът обаче едва от версия 3.5 започна да използва елипсовидни ъгли, т.е. започна да приема две стойности за ъгъла, за да определи независимо вертикалния и хоризонталния радиус. Преди версия 3.5 браузърът приема само една стойност за всеки ъгъл, което води до еднакви вертикални и хоризонтални радиуси за ъгъла.

Синтаксисът, както е написано в тази статия, използва префикса -moz-. Основната разлика е само в имената на отделните граници на свойството border-*-radius, с префикса -moz- всичко изглежда малко по-различно:

Спецификация на W3C	Внедряване на Mozilla
граница-горе-ляво-радиус	-moz-border-radius-goreleft
border-top-right-radius	-moz-border-radius-topright
border-bottom-right-radius	-moz-border-radius-bottomright
border-bottom-left-radius	-moz-border-radius-bottomleft

Метод на процента на внедряванеза браузъра Mozilla е малко по-различен. Можете да прочетете повече за това в Mozilla Developer Center тук.

Примери за различни браузъри

Няколко основни примера, които работят добре в текущите версии на Firefox, Safari/Chrome, Opera и IE9:

---