English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Как использовать свойство border-image CSS для замены стиля рамки изображением. Это сокращенный атрибут, который позволяет одновременно устанавливатьborder-image-source,border-image-slice,border-image-width,border-image-outsetиborder-image-repeatСвойство
В таблице ниже приведены инструкции по использованию и историю версий этого свойства, а также его использование в скриптах JavaScript.
| Значение по умолчанию: | none 100 stretch; Просмотреть все свойства |
|---|---|
| Применяется к: | Эта свойство может быть применено к любому элементу, но когда значение свойства border-collapse для таблицы (например, tr, th, td) равно collapse, свойство border-image не действует. Оно также применяется к::first-letter. |
| Ингерит: | нет |
| Анимированный: | Нет.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript синтаксис: | объект.style.borderImage="url(border.png) 30 30 round" |
Синтаксис этой属性的 следующий:
border-image: [ source slice width outset repeat ] | initial | inherit
Ниже приведен пример того, как использовать свойство border-image.
.box {
width: 300px;
height: 150px;
border: 15px solid transparent;
-webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
-o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
border-image: url("border.png") 30 30 round;
}Проверьте, как это работает‹/›В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| border-image-source | Определить положение изображения, используемого для рамки. |
| border-image-slice | Определить векторный отступ от верхнего, правого, нижнего и левого краев изображения рамки. |
| border-image-width | Определить ширину рамки. |
| border-image-outset | Определить количество, на которое изображение рамки выходит за пределы рамки. |
| border-image-repeat | Определить, как масштабировать или повторять центральную часть изображения рамки, чтобы она соответствовала размеру рамки. |
| initial | Установить этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент использует значение свойства border-image родительского элемента. |
Совместимость браузеров для свойств border-image, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Пожалуйста, обратитесь к следующим руководствам:CSS3 BorderиCSS Border.
Связанные свойства:border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat,border.