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

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

element.style.borderImageOutset – це властивість JavaScript, яка визначає відступ зображення рамки від країв елемента. Основна функціональність цієї властивості полягає в тому, щоб контролювати, наскільки далеко зображення рамки буде виходити за межі елемента. Це може бути корисним для створення декоративних ефектів, де рамка зображення виходить за межі звичайної рамки, додаючи додаткову візуальну привабливість. Основні сфери застосування цієї властивості включають створення унікальних дизайнів для кнопок, панелей, карток або інших важливих елементів на веб-сторінці, де необхідно мати контроль над відображенням рамки.

Щоб використовувати element.style.borderImageOutset, потрібно задати значення цієї властивості для елемента. Значення може бути задане у пікселях, відсотках або числових значеннях.

Тепер розглянемо приклад, де ми динамічно змінюємо відступ зображення рамки за допомогою JavaScript. Це може бути корисним для створення інтерактивних елементів на веб-сторінці, таких як кнопки зі змінними рамками.

<div id="dynamicElement">Вміст елемента</div>
<div id="controls">
  <button onclick="changeOutset(5)">Відступ 5px</button>
  <button onclick="changeOutset(20)">Відступ 20px</button>
  <button onclick="changeOutset(40)">Відступ 40px</button>
</div>

<script>
  function changeOutset(outset) {
    let dynamicElement = document.getElementById('dynamicElement');
    dynamicElement.style.borderImageOutset = `${outset}px`;
  }
  
  // Встановлення початкового відступу
  changeOutset(10);
</script>

У цьому прикладі ми створили кнопку, яка змінює відступ зображення рамки елемента при натисканні. Функція changeOutset приймає значення відступу і встановлює його для елемента div, дозволяючи користувачу динамічно змінювати вигляд рамки. Це забезпечує інтерактивну демонстрацію можливостей властивості element.style.borderImageOutset, дозволяючи користувачам легко змінювати відступи зображень рамок на веб-сторінці.

Завдяки властивості element.style.borderImageOutset ви можете створювати унікальні та привабливі рамки, які виходять за межі основного елемента, забезпечуючи додатковий візуальний ефект. Це особливо корисно для створення декоративних елементів на веб-сторінці, де необхідно мати контроль над відображенням рамки.

Порада:

Експериментуйте з різними одиницями виміру для borderImageOutset, щоб досягти потрібного ефекту. Ви можете використовувати пікселі, відсотки або числові значення. Наприклад, використання відсотків може бути корисним для створення адаптивних дизайнів, де розміри елементів змінюються в залежності від розміру вікна браузера:

let panel = document.getElementById('responsivePanel');
panel.style.borderImageSource = 'url("border-image-responsive.png")';
panel.style.borderImageSlice = 20;
panel.style.borderImageOutset = '5%';

Це дозволить рамці зображення адаптуватися до розміру елемента, забезпечуючи гнучкість дизайну.

Порада:

Пам’ятайте, що borderImageOutset може впливати на розмітку сторінки, тому використовуйте цю властивість обережно. Великий відступ рамки може перекривати сусідні елементи або змінювати загальний вигляд сторінки. Після встановлення значення borderImageOutset перевірте, як виглядає ваш елемент у різних контекстах і на різних пристроях, щоб забезпечити сумісність:

let card = document.getElementById('cardElement');
card.style.borderImageSource = 'url("card-border-image.png")';
card.style.borderImageSlice = 40;
card.style.borderImageOutset = '15px';

Цей приклад додає 15 пікселів відступу рамки, але важливо перевірити, чи не виходить рамка за межі контейнера або не перекриває інші елементи.

Синтаксис

element.style.borderImageOutset

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми створюємо інтерфейс з елементом div, який має прозору рамку та зображенням як рамкою. Використовуючи кнопки, користувач може змінювати відступ зображення рамки, встановлюючи різні значення для властивості borderImageOutset. Це дозволяє інтерактивно змінювати вигляд рамки та демонструє, як працює ця властивість у реальному часі. Користувачі можуть натискати кнопки, щоб перемикати відступи на 5px, 20px або 40px, таким чином візуально бачачи зміни в оформленні елемента.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/VwOrvWz">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми додаємо рамку зображення до елемента та встановлюємо відстань між рамкою та вмістом за допомогою властивості borderImageOutset. Це корисно для створення візуального ефекту, коли рамка не торкається безпосередньо вмісту елемента.

// Отримуємо елемент за його ідентифікатором
var element = document.getElementById('myElement');

// Застосовуємо властивість borderImageOutset
element.style.borderImageOutset = '10px';

<div id="dynamicElement">Вміст елемента</div>
<div id="controls">
	<button onclick="changeOutset(5)">Відступ 5px</button>
	<button onclick="changeOutset(20)">Відступ 20px</button>
	<button onclick="changeOutset(40)">Відступ 40px</button>
</div>

<script>
	function changeOutset(outset) {
	  let dynamicElement = document.getElementById('dynamicElement');
	  dynamicElement.style.borderImageOutset = ${outset}px;
	}

	// Встановлення початкового відступу
	changeOutset(10);
</script>

JS довідник

JavaScript

Наповнення JS розділу