JS властивість CSSStyleDeclaration.borderBottomLeftRadius

Загальний опис

element.style.borderBottomLeftRadius - це властивість JavaScript, яка дозволяє змінити радіус округлення нижнього лівого кута будь-якого елемента HTML. Використовуючи цей метод, ви може змінити візуальний аспект бордюра ваших елементів, створюючи efekt округлення. Ця властивість часто використовується, коли потрібно змінити або налаштувати деталі візуального дизайну веб-сторінки.

Зазвичай, властивість element.style.borderBottomLeftRadius використовується з рядковим значенням, яке репрезентує величину радіуса. Це можуть бути числові значення, які мають бути вказані в пікселях або відсотках. Для прикладу:

var box = document.querySelector(".box");
box.style.borderBottomLeftRadius = "15px";

В цьому прикладі, ми обираємо елемент HTML з класом "box" і використовуємо властивість borderBottomLeftRadius для створення радіуса округлення 15 пікселів на нижньому лівому куті бордюра цього елемента.

Величина радіусу округлення може бути встановлена як в абсолютних величинах (таких як пікселі), так і в відносних величинах (відсотки). Відсоткове значення визначає радіус округлення як відсоток від ширини елемента. Результат може змінюватися в залежності від властивостей самого елемента.

var box = document.querySelector(".box");
box.style.borderBottomLeftRadius = "50%";

В цьому прикладі, нижній лівий кут боксу буде округленим у вигляді півкола, оскільки радіус округлення встановлено в 50%.

Пам'ятайте, що при використанні element.style.borderBottomLeftRadius радіус округлення впливає тільки на нижній лівий кут. Якщо ви хочете округлити всі кути елемента HTML, вам знадобиться комбінація властивостей: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius та borderBottomLeftRadius. Саме тому краще використовувати загальні властивості, як borderRadius, коли вам потрібно однакове округлення для всіх кутів.

На завершення, element.style.borderBottomLeftRadius - це потужний інструмент для налаштування візуального аспекта ваших елементів HTML. Він дозволяє вам контролювати деталі вашого дизайну, що, в свою чергу, може зробити ваш веб-сайт більш привабливим і унікальним. Досліджуйте його повностю, щоб зрозуміти всі можливості, які він надає.

правити

Порада

Використовуйте відсотні значення для створення більш адаптивних дизайнів. Коли ви вказуєте величину радіуса у відсотках, радіус округлення автоматично змінюється при зміні ширини елемента. Наприклад, element.style.borderBottomLeftRadius = "50%" встановить радіус так, що нижній лівий кут буде схожим на півколо, якщо елемент є квадратом.

автор: Bond правити

Порада

Пам'ятайте, що властивість element.style.borderBottomLeftRadius впливає тільки на радіус округлення нижнього лівого кута. Якщо ви хочете округлити всі кути елемента, вам варто використовувати властивість element.style.borderRadius.

автор: Bond правити

Порада

Якщо ви хочете створити ефект округлення, що легко адаптується до великих змін розмірів елемента, поєднуйте піксельні та відсоткові значення в одній властивості element.style.borderBottomLeftRadius. Наприклад, element.style.borderBottomLeftRadius = "50% 20px". Такий прийом створює ефект овального округлення, якщо елемент є прямокутником, і більш адаптивне округлення, якщо елемент має бути квадратом.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.borderBottomLeftRadius

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="myElement">перший елемент myElement</div>
<div class="myElement">другий елемент myElement</div>

// Створюємо змінну для доступу до елементу HTML
var element = document.querySelector(".myElement");

// Встановлюємо радіус округлення нижнього лівого кута елемента
element.style.borderBottomLeftRadius = "15px";

<div class="myElement">перший елемент myElement</div>
<div class="myElement">другий елемент myElement</div>

// Створюємо змінну для доступу до елементу HTML
var element = document.querySelector(".myElement");

// Створюємо функцію для зміни радіусу округлення
function changeBorderRadius() {
  var borderRadius = element.style.borderBottomLeftRadius;

  if (borderRadius == "50%") {
    element.style.borderBottomLeftRadius = "20px";
  } else {
    element.style.borderBottomLeftRadius = "50%";
  }
}

// Використовуємо функцію при кліку на елемент
element.onclick = changeBorderRadius;