English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут CSS border-image-sliceborder-image-sourceУказанное изображение разделено на 9 областей: четыре угла, четыре стороны и центральная часть. Это достигается с помощью четырех внутренних смещений, которые обычно создают 3x3 сетку.
Центральная часть границ будет выброшена и не будет использоваться границами themselves, ноbackground-imageЕсли используется ключевое слово fill, его следует использовать в качестве фонового изображения.
В таблице ниже приведены примеры использования и история версий этого атрибута, а также синтаксис использования этого атрибута в скриптах JavaScript.
| Значение по умолчанию: | 100% |
|---|---|
| Применяется к: | Этот атрибут может быть применен к любому элементу, но когда значение атрибута border-collapse у таблицевых элементов (например, tr, th, td) равно collapse, атрибут border-image-slice не действует. Он также применяется к::first-letter. |
| Инheritance: | Нет |
| Анимация: | Нет.См. также Анимационные свойства. |
| Версия: | Новые возможности CSS3 |
| JavaScript грамматика: | object.style.borderImageSlice="60% 60%" |
Грамматика этого свойства такая:
border-image-slice: [ number | percentage ] 1 to 4 values | fill | initial | inherit
Ниже приведен пример того, как использовать свойство border-image-slice.
.box {
width: 300px;
height: 150px;
border: 15px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
border-image-repeat: round;
}Проверьте, как это работает‹/›Таблица ниже описывает значения этого свойства.
| Значение | Описание |
|---|---|
| number | Для растровых изображений, это расстояние (в пикселях), для векторных изображений, это векторные координаты. |
| percentage | Относительно размера изображения: горизонтальное смещение ширины изображения, вертикальное смещение высоты изображения. |
| fill | Если существует, то сохранить центральную часть изображения. В противном случае, посередине будет прозрачным. |
| initial | Установить этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент использует вычисленный значение свойства border-image-slice родительского элемента. |
Совместимость браузеров для свойств border-image-slice, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Пожалуйста, обратитесь к следующим учебникам:CSS3 BorderиCSS Border.
Связанные свойства:border-image,border-image-source,border-image-repeat,border-image-width,border-image-outset,border.