border-image-slice CSS

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

Свойство **`border-image-slice`** разделяет изображение, указанное в [`border-image-source`](/css/border-image-source/) на девять регионов: четыре угла, четыре края и середину.
Значение по умолчанию:

100%

Значение по умолчанию:
`100%`
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Backgrounds and Borders Module Level 3](https://drafts.csswg.org/css-backgrounds-3/#border-image-slice)
Поддержка браузерами:

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="border-image" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=border-image">Can I Use border-image?</a> Data on support for the border-image feature across the major browsers from caniuse.com. </p>

Синтаксис

/* border-image-slice: slice */
border-image-slice: 30%; 

/* border-image-slice: vertical horizontal */
border-image-slice: 10% 30%;

/* border-image-slice: top horizontal bottom */
border-image-slice: 30 30% 45;

/* border-image-slice: top right bottom left */
border-image-slice: 7 12 14 5; 

/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

Синтаксис

/* border-image-slice: slice */ border-image-slice: 30%; /* border-image-slice: vertical horizontal */ border-image-slice: 10% 30%; /* border-image-slice: top horizontal bottom */ border-image-slice: 30 30% 45; /* border-image-slice: top right bottom left */ border-image-slice: 7 12 14 5; /* border-image-slice: … fill */ /* The fill value can be placed between any value */ border-image-slice: 10% fill 7 12; /* Global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset;

Содержание

  • Синтаксис
      /* border-image-slice: slice */ border-image-slice: 30%; /* border-image-slice: vertical horizontal */ border-image-slice: 10% 30%; /* border-image-slice: top horizontal bottom */ border-image-slice: 30 30% 45; /* border-image-slice: top right bottom left */ border-image-slice: 7 12 14 5; /* border-image-slice: … fill */ /* The fill value can be placed between any value */ border-image-slice: 10% fill 7 12; /* Global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset;
  • Значения
    • Примеры

      В начало