1. Веб-технологии для разработчиков
  2. CSS: каскадные таблицы стилей
  3. Руководство по CSS
  4. Properties
  5. border-image-slice

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

border-image-slice

Baseline
Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

Описание

CSS-свойство border-image-slice делит изображение указанное в border-image-source на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesЧетыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The keyword can be set at any position in the property (before, after or between the other values).

The border-image-repeat, border-image-width, border-image-outset properties define how these images will be used.

The shorthand CSS property border-image may reset this property to its default value.

Начальное значение100%
Применяется квсе элементы, кроме внутренних табличных элементов, когда border-collapse:collapse. Это также применяется к ::first-letter.
Наследуетсянет
Процентыотносятся к размеру рамки изображения
Обработка значенияодно к четырём процентам (как указано) или абсолютной длине(ам), плюс ключевое слово fill, если указано
Animation typeby computed value type

Синтаксис

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

/* border-image-slice: horizontal vertical */
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;

/* Глобальные значения */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

Значения

slice

Is a <number> or a <percentage> of the offset for the four slicing lines. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

horizontal

Is a <number> or a <percentage> of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

vertical

Is a <number> or a <percentage> of the offset for the two vertical slicing lines, the right and the left ones. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

top

Is a <number> or a <percentage> of the offset for the top slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

bottom

Is a <number> or a <percentage> of the offset for the bottom slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

Is a <number> or a <percentage> of the offset for the right slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

left

Is a <number> or a <percentage> of the offset for the left slicing line. Note that a <length> value is not allowed, and therefore invalid. The <number> represents pixels for raster images and coordinates for vector images. Also, <percentage> values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.

fill

Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.

inherit

Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Формальный синтаксис

border-image-slice = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3
# border-image-slice

Совместимость с браузерами

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content