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

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

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

Порада

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

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

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

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

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

Синтаксис

element.style.borderImageOutset

Переглядачі

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

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

Переглядач
	15	15	6	15	12	11

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

Переглядач
	4.4	18	15	6

Приклади

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

<header>
<h2 class="title">element.style.borderImageOutset</h2>
<p class="description">Визначає відступ зображення рамки від країв елемента.</p>
</header>
<main>
<div class="result">
  <div id="borderBox">Демонстрація</div>
  <div id="controls">
    <button onclick="changeOutset(5)">Відступ 5px</button>
    <button onclick="changeOutset(20)">Відступ 20px</button>
    <button onclick="changeOutset(40)">Відступ 40px</button>
  </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: #f8f8f8;
  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);
}

#borderBox {
  width: 200px;
  height: 200px;
  border: 20px solid transparent; /* Потрібно встановити прозорий колір для border */
  text-align: center;
  line-height: 200px;
}

#controls {
  margin-top: 20px;
}

#controls button {
  padding: 10px;
  font-family: monospace;
  margin-right: 10px;
}

// Рамка зібрана просто тут — приклад нічого не вантажить із мережі
const FRAME = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200'><rect width='300' height='200' fill='%23ffd400'/><rect x='30' y='30' width='240' height='140' fill='%23222'/><circle cx='15' cy='15' r='11' fill='%23e0431f'/><circle cx='285' cy='15' r='11' fill='%23e0431f'/><circle cx='15' cy='185' r='11' fill='%23e0431f'/><circle cx='285' cy='185' r='11' fill='%23e0431f'/></svg>";

function changeOutset(outset) {
  let borderBox = document.getElementById('borderBox');
  borderBox.style.borderImageSource = `url("${FRAME}")`;
  borderBox.style.borderImageSlice = 30;
  borderBox.style.borderImageOutset = `${outset}px`;
}

// Встановлення початкового відступу
changeOutset(10);
//# sourceURL=pen.js

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент за його ідентифікатором
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>

#dynamicElement {
    padding: 12px;
    margin: 45px;
    border: 12px solid transparent;
    border-image: linear-gradient(45deg, #0172ad, #9dcb4e) 30;
}

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

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