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

Переглядачі

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

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

Переглядач
	4	4	5	10.5	12	9

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

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

Приклади

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

<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;

<header>
  <h2 class="title">element.style.borderBottomLeftRadius</h2>
  <p class="description">Встановлює або отримує радіус округлення нижнього лівого кута елемента</p>
</header>
<main>
  <div class="result">
    <div id="demo-box">Клікніть мене!</div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #fffff0;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#demo-box {
  width: 300px;
  height: 150px;
  line-height: 150px;
  border: 1px solid black;
  text-align: center;
  margin-top: 25px;
  cursor: pointer;
}

document.getElementById("demo-box").addEventListener("click", function () {
  var demoBox = document.getElementById('demo-box');
  var borderRadiusValue = Math.floor(Math.random() * 50) + "px";

  // Встановлення нового значення радіусу безпосередньо в стилі елемента:
  demoBox.style.borderBottomLeftRadius = borderRadiusValue;

  // Змінюємо текст в елементі, щоб показати поточне значення радіусу:
  demoBox.textContent = "Мій радіус: " + borderRadiusValue;
});
//# sourceURL=pen.js