Вітаю вас на сторінках цього сайту. Мій блог в основному присвячений технологіям html і css, за допомогою яких можна створювати шаблони сайтів. Дуже часто при розробці необхідно округляти один або кілька кутів у потрібного елемента. Раніше це зробили за допомогою вставки відповідного зображення, але сьогодні в css закруглення кутів зробити набагато простіше. Давайте дивитися як.
Закруглення кутів у блокових елементів
За замовчуванням блок має прямі кути. Не завжди це потрібно по дизайну - закругленими часто роблять кнопки, пункти меню і навіть загальні контейнери. І все завдяки новому властивості - border-radius. До його появи закруглення не можна було зробити засобами css.
Я знову буду показувати його роботу на прикладі звичайного жовтого блоку. Для простоти мій елемент буде квадратним - 150 на 150 пікселів. Я задам блоку такий стиль:
Давайте подивимося, як змінився його зовнішній вигляд.
Для елемента 150 на 150 це вже значне округлення, так що він значно змінився від свого початкового вигляду.
Як зробити з квадрата ідеальний коло
Значення border-radius можна задавати не тільки в пікселях, але і в процентах. Якщо вам потрібно перетворити квадратний елемент в коло, досить записати так:
Чи спрацює тільки в тому випадку, якщо у елемента однакова ширина і висота. Якщо ж розміри різні, то елемент придбає овальну форму.
Закруглення для кожного кута окремо
Css дає ще одну чудову можливість - задати округлення з кожного боку окремо. Це можна зробити двома способами:
1. Використовувати властивості border-top-left-radius, border-bottom-left-radius, border-bottom-right-radius і border-top-right-radius. Іноді ними можна скористатися, але більш зручним є другий варіант.
2. Цей спосіб полягає в тому, щоб задавати закруглення за допомогою властивості border-radius, записавши відразу чотири значення через пробіл - для верхнього лівого, верхнього правого, нижнього лівого і нижнього правого кутів. Саме в такій послідовності - це важливо.
А ну-ка давайте спробуємо:
Таким чином, закруглилися тільки верхні кути. Якби ми навпаки залишили перші два значення нульовими, а третє і четверте задали б, то заокруглення з'явилося б у нижніх кутів. Записати можна і так:
В цьому випадку перше значення задає закруглення для лівого верхнього і правого нижнього кутів, а друге - правого верхнього і лівого нижнього. Ось така цікава логіка.
розширені можливості
Насправді значення можна записувати через слеш. За замовчуванням border-radius заокруглення кути тільки по одній осі, а ще є можливість робити це з іншої. Давайте запишемо так:
І ось так мило перетворився блок в результаті цих дій.
Відповідно, в цьому випадку діє також прописування для кожної сторони окремо.
Це той випадок, коли краще один раз спробувати, ніж сто разів прочитати. Спробуйте самі, поексперементіруйте. Зовнішній вигляд елемента буде змінюватися в залежності від його початкових розмірів і того, які значення ви його поставите.
У мене є тільки одне попередження: якщо ви спробуєте записати щось на зразок цього:
Начебто все дотримано - значення для всіх чотирьох сторін записані. Але як ви думаєте, блок якось змінить свій зовнішній вигляд? Ні, тому що браузер просто не зможе так скривити елемент. Тому працюйте з властивістю, але не перестарайтеся, тому що тоді взагалі властивість може не спрацювати.
Отже, це вся інформація, яку я вам хотів сьогодні розповісти про округлення кутів. Ще хотілося б відзначити, що властивість з'явилося у версії CSS 3. Відповідно, в старих браузерах воно не підтримується. Internet Explorer підтримує властивість з десятої версії.
Що ж, сьогодні ми розібрали, як робити в css обрізка кутів. Сподіваюся, інформація була для вас корисною.
Цікаве зі світу сайтобудування
Ви підписалися. Дякую.