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

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

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

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

Розглянемо декілька прикладів для кращого розуміння.

Простий приклад: розрізання зображення на рівні частини з кожного боку.

let element = document.getElementById('myElement');
element.style.borderImageSource = 'url("border-image.png")';
element.style.borderImageSlice = '30'; // Розрізка на 30 пікселів з кожного боку

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

Складніший приклад: використання різних значень для кожного боку.

let element = document.getElementById('myElement');
element.style.borderImageSource = 'url("border-image.png")';
element.style.borderImageSlice = '30 40 20 10'; // Топ: 30, Право: 40, Низ: 20, Ліво: 10

У цьому прикладі зображення буде розрізане на 30 пікселів зверху, 40 - справа, 20 - знизу, і 10 - зліва. Це дозволяє створювати асиметричні рамки, які можуть відповідати складним дизайнерським вимогам. Різні значення для кожного боку допомагають досягти унікальних візуальних ефектів.

Використання fill для заповнення внутрішньої частини елемента зображенням.

let element = document.getElementById('myElement');
element.style.borderImageSource = 'url("border-image.png")';
element.style.borderImageSlice = '30 fill'; // Розрізка на 30 пікселів з кожного боку і заповнення внутрішньої частини

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

Порада:

Комбінуйте borderImageSlice з іншими властивостями border-image для досягнення бажаного ефекту. Використовуйте borderImageSlice разом із borderImageWidth, borderImageOutset та borderImageRepeat, щоб отримати повний контроль над дизайном рамки. Наприклад, можна створити рамку, яка буде розтягуватися або повторюватися, залежно від ваших потреб.

let element = document.getElementById('myElement');
element.style.borderImageSource = 'url("border-image.png")';
element.style.borderImageSlice = '30 40 20 10'; // Різні значення для кожної сторони
element.style.borderImageWidth = '10px';
element.style.borderImageRepeat = 'round';

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

Порада:

Використовуйте відсоткові значення для адаптивних дизайнів. Використання відсотків замість фіксованих пікселів дозволяє вам створювати адаптивні рамки, які автоматично змінюються в розмірі залежно від розміру елемента. Наприклад, значення borderImageSlice: '10%'; означає, що зображення буде розрізане на 10% від його ширини та висоти, що робить ваші рамки гнучкими та підходящими для різних пристроїв.

let element = document.getElementById('myElement');
element.style.borderImageSource = 'url("border-image.png")';
element.style.borderImageSlice = '10%';

Синтаксис

element.style.borderImageSlice

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад показує, як змінюється відображення рамки елемента при зміні значення властивості borderImageSlice. Елемент має рамку, яка створюється за допомогою зображення, і користувач може натискати кнопку, щоб циклічно змінювати значення borderImageSlice між 10, 30 і 50, що впливає на те, як розрізається зображення для створення рамки. Це дозволяє побачити, як властивість borderImageSlice впливає на зовнішній вигляд рамки елемента.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYayYGq">
  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>.

У цьому прикладі, властивість borderImageSlice встановлюється з чотирма значеннями: 20 30 40 50, що визначає поділ зображення межі на 20 пікселів для верхньої сторони, 30 пікселів для правої сторони, 40 пікселів для нижньої сторони та 50 пікселів для лівої сторони.

<div class="advanced-bordered-element" id="advancedElement">Складніший приклад</div>

<script>
    // Отримуємо елемент за ID
    var advancedElement = document.getElementById('advancedElement');
    // Встановлюємо різні значення для кожної сторони borderImageSlice
    advancedElement.style.borderImageSlice = '20 30 40 50';
</script>

У цьому прикладі, властивість borderImageSlice встановлюється на 10, що означає, що зображення межі буде поділене на 30 пікселів з кожної сторони.

<div class="bordered-element" id="element">Простий приклад</div>

<script>
    // Отримуємо елемент за ID
    var element = document.getElementById('element');
    // Встановлюємо значення borderImageSlice
    element.style.borderImageSlice = '10';
</script>

JS довідник

JavaScript

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