Граница-радиус - CSS-трикове

Можете да дадете на всеки елемент „заоблени ъгли“, като приложите border-radiusчрез CSS. Ще забележите само ако има промени в цвета. Например, ако елементът има цвят на фона или граница, който е различен от елемента, над който е свършил. Прости примери:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Наистина вече не е необходимо, но за възможно най-добрата поддръжка на браузъра можете да добавите префикс с -webkit-и -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Обърнете внимание на реда на тези свойства: Префиксите на доставчика са изброени първи, а непредфиксираната версия „spec“ е посочена последна. Това е правилният начин да го направите. Радиусът на границата е особено добър пример за това, защо го правим по този начин. В малко по-сложната версия на използването border-radius(където предавате две стойности вместо една) по-старият -webkit-префикс на доставчик би направил нещо съвсем различно от версията „spec“. Така че ако копираме / поставяме сляпо едни и същи стойности във всичките три свойства, можем да видим различни резултати в различни браузъри. Научете повече за този сценарий. За най-голяма последователност в дългосрочен план, най-добре е да посочите последната версия със спецификация.

В наши дни е доста реалистично да изпускате префиксите и просто да използвате граничен радиус, както е обсъдено тук.

Ако елементът има фон на изображение, той естествено ще бъде отрязан в заобления ъгъл:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Понякога можете да видите background-color„изтичане“ извън границата, когато border-radiusе налице. (виж). За да предотвратите това, използвате фонов клип:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Само с една стойност border-radiusще е същото и на четирите ъгъла на елемент. Но това не е необходимо. Можете да посочите всеки ъгъл отделно, ако желаете:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Можете също така да посочите две или три стойности. MDN го обяснява добре:

Ако е зададена една стойност, този радиус се прилага за всичките 4 ъгъла .
Ако са зададени две стойности, първата се отнася за top-leftи bottom-rightъгъл, втората се отнася за top-rightи bottom-leftъгъл.
Четири стойности се прилагат към top-left, top-right, bottom-right, bottom-leftъгъл в този ред.
Три стойности: Втората стойност се отнася за top-rightи също bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Можете също така да посочите радиусите, в които ъгълът се закръглява с. С други думи, закръгляването не трябва да е идеално кръгло, може да е елипсовидно. Това се прави с помощта на наклонена черта („/”) между две стойности.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Забележка: Firefox поддържа само елипсовидни граници в 3.5+ и по-стари браузъри WebKit (например Safari 4) неправилно третира „40px 10px“ като същото като „40px / 10px“.

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

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Забележка: В Safari процентни стойности за радиус на границата се поддържат само в 5.1+. В Opera се поддържа само в 11.5+.

Ето всяко отделно свойство с префикси на доставчика:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Забележка: Всяка от тези стойности може да има и стойност, разделена с интервал, като „5px 10px“, която се държи като стойност, разделена на наклонена черта в стенография (хоризонтален радиус (интервал) вертикален радиус).

Ресурси

Бърз инструмент за генериране на код на радиус на границата
Mozilla Docs
В търсене на перфектния радиус
Трябва ли вече да добавяме префикс border-radius?

Ето малко нещо, което да играете с различните свойства и стойности:

Вижте писалката All-border-radius 'от Chris Coyier (@chriscoyier) на CodePen.

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

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.