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

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

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

Порада

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

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

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

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

Синтаксис

element.style.borderImageSlice

Переглядачі

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

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

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

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

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

Приклади

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

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

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

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

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