Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+ |
Завдання
Зробити блок із закругленими куточками з допомогою CSS3.
Рішення
Традиційні прямокутні куточки в дизайні сайтів давно вже всім набридли. У моді округлені куточки, які робляться не з допомогою зображень, а через стилі, для чого використовується властивість border-radius. Це властивість може мати один, два, три або чотири значення розділених пробілом, які і визначають радіус усіх куточків або кожного окремо.
В табл. 1 наведено різну кількість значень і вид блоку, який виходить в цьому випадку.
Код | Опис | Вид |
---|---|---|
div { border-radius: 10px; } | Радіус скруглення для усіх куточків відразу. | |
div { border-radius: 0 10px; } | Перше значення встановлює радіус лівого верхнього і правого нижнього кутка, друге значення — для верхнього правого і лівого нижнього. | |
div { border-radius: 20px 10px 0; } | Перше значення задає радіус лівого верхнього куточка, друге — одночасно верхнього правого і лівого нижнього, а третє значення — правого нижнього. | |
div { border-radius: 20px 10px 5px 0; } | Послідовно встановлює радіус лівого верхнього куточка, правого верхнього, правого і нижнього лівого нижнього. |
Щоб врахувати старі браузери поряд з border-radius додають властивості з префіксами, як показано в прикладі 1. Через наявність цих властивостей код CSS стає невалідним.
Приклад 1. Куточки у блоку
HTML5,CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Радіус</title> <style> div { background: #007E3E; /* Колір фону */ color: #fff; /* Колір тексту */ padding: 10px; /* Поля навколо тексту */ -moz-border-radius: 5px; /* Для Firefox 3 */ -webkit-border-radius: 5px; /* Для Safari 4 і Chrome */ border-radius: 5px; /* Для сучасних браузерів */ } </style> </head> <body> <div>Мене — супплетивная форма знахідного відмінка від я.</div> </body> </html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Блок із закругленими куточками