• Теория
  • Теория

Нарезка несимметричных картинок

Сравните две картинки:

Первый вариант рамкиВторой вариант рамки

Для нарезки первой из них можно было задать одинаковые отступы линий разреза — 50px. Для второй картинки этого явно недостаточно — она менее симметрична.

С помощью border-image-slice можно задавать разные отступы линий разреза. Для этого нужно задавать значения через пробел в порядке: верх, право, низ, лево. Пример:

border-image-slice: 10 20 30 40;

Средняя часть картинки обычно не используется. Но если в значение свойства добавить ключевое слово fill, то средняя часть картинки будет отображаться в средней области рамки: она закроет собой фон блока, но не закроет содержимое. Пример:

border-image-slice: 10 20 30 40 fill;

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Рамки и фоны. Погружение» тренажёра «Продвинутая работа с фонами и рамками» можно после регистрации и оформления подписки.