CSS свойство border-image-slice

❮ Назад Вперед ❯

Свойство border-image-slice определяет, как разделить изображение, указанное в свойстве border-image-source, на девять частей: четыре угла, четыре края, середина. "Средняя" часть является полностью прозрачной, если не установлено значение "fill".

Свойство border-image-slice имеет три значения: number, percentage и fill. Number указывает на смещение краев в пикселях для растрового изображения и на координаты для векторного изображения. Percentage определяет смещение краев в виде процентов оригинального размера изображения. При значении fill, средняя часть изображения отображается в виде фонового изображения.

Это свойство может иметь до четырех значений. Отрицательные значения недопустимы. Если применено одно значение, все четыре части будут на равном расстоянии от соответствующих сторон. При наличии двух значений, первое из них формирует части, которые измеряются с верхней и нижней стороны, а второе формирует части, которые измеряются с правой и левой стороны. Если применены три значения, первое формирует части, измеряемые с верхней стороны, второе - части, измеряемые с левой и правой стороны, а третье - с нижней стороны. А при наличии четырех значений, они формируют части с четырех сторон.

Значение по умолчанию	100%.
Применяется	Ко всем элементам, а также к ::first-letter .
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.borderImageSlice = "10

Синтаксис

border-image-slice: number | % | fill | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image-slice</h2>
    <p class="border">Здесь установлено 20% для border-image-slice.</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Попробуйте сами!

Пример, где использованы два значения: первое из них формирует части, которые измеряются с верхней и нижней стороны, а второе формирует части, измеряемые с правой и левой стороны:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image-slice</h2>
    <p class="border">Здесь установлены 30 и 50 для border-image-slice.</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Попробуйте сами!

Пример, где первое значение установлено с помощью percentages, а второе с помощью "fill".

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-image-slice</h2>
    <p class="border"><strong>Здесь установлено 15 fill для border-image-slice.</strong></p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
number	Указывает на смещение краев в пикселях для растрового изображения и на координаты для векторного изображения.
%	Percentage определяет смещение краев в виде процентов оригинального размера изображения.
fill	Средняя часть изображения отображается в виде фонового изображения.
initial	Средняя часть изображения отображается в виде фонового изображения.
inherit	Значение элемента наследуется от родительского элемента.