Закруглені кути на css3.

Привіт всім і сьогодні ми розберемо властивість border-radius, яке дозволяє зробити закруглені куточки для будь-яких блокових елементів на сторінці.

Для початку створимо простеньку html розмітку

 




 
border-radius 
charset="Utf-8"gt; 
 
 
class="Block"gt;

Тепер поставимо базові стилі для нашого блоку.

.block { 
 width:200px- 
 height:200px- 
 margin:20px- 
 background:# 777- 
}

Ось, що ми маємо зараз

базовий блок

Давайте заокруглені кути блоку на 10px

Відео: CSS CSS3 Урок 8 Закруглені кути border radius

.block { 
 width:200px- 
 height:200px- 
 margin:20px- 
 background:# 777- 
 
 border-radius:10px- 
}

округлений блок

Щоб скруглить всі кути, ми додали властивість border-radius з єдиним значенням 10px, але ми можемо поставити для кожного кута своє скругление. Для цього просто перерахуємо 4 значення для верхнього лівого, верхнього правого, нижнього правого і нижнього лівого кута.

.block { 
 width:200px- 
 height:200px- 
 margin:20px- 
 background:# 777- 
 
 border-radius:10px20px30px40px- 
}

округлений блок з різними значеннями

Як видно з скріншоту, всі кути у нас тепер з різним скруглением. Ми можемо також расспісать властивості для кожного кута окремо

.block { 
 width:200px- 
 height:200px- 
 margin:20px- 
 background:# 777- 
 
 border-top-left-radius:10px-// верхній лівий кут 
 border-top-right-radius:20px-// верхній правий вугол 
 border-bottom-right-radius:30px-// нижній правий кут 
 border-bottom-left-radius:40px-// нижній лівий кут 
}

"Навіщо це потрібно, якщо у нас є скорочена форма?" - Щоб відповісти на це питання, давайте розглянемо приклад

Відео: Уроки по CSS3. Частина 5. Закруглені кути border-radius

.block { 
 width:200px- 
 height:200px- 
 margin:20px- 
 background:# 777- 
 
 border-bottom-right-radius:20px40px- 
}

нерівномірне скругление

Як видно з скріншоту, наш правий нижній кут закруглений нерівномірно. Тобто по вертикалі кут закруглився на 40px, а по горизонталі на 20px. Даний спосіб використовується, коли вам потрібно зробити якусь дуже складну фігуру на CSS, в інших випадках цілком вистачає скороченою форми.

І останнє: ви можете вказувати радіус заокруглення не тільки в пікселях, але і в відсотках. Наприклад, давайте зробимо ідеальний коло. Для цього поставимо всіх кутках радіус заокруглення 50%

Відео: Закруглені кути меню CSS

.block { 
 width:200px- 
 height:200px- 
 margin:20px- 
 background:# 777- 
 
 border-radius:50% - 
}

ідеальний коло

Поділися в соціальних мережах:

Схожі