Поместите изображение границы на 10 пикселей за пределы границ элемента:
#borderimg
{
border-image-source: url(border.png);
border-image-outset: 10px;
}
Попробуйте сами »
Определение border-image-outset
CSS свойство border-image-outset определяет величину, на которую область изображения границ выходит за пределы границы бокса.
Совет: Также посмотрите на свойство border-image (сокращенное свойство для настройки всех свойств border-image-*).
| Значение по умолчанию: | 0 |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderImageOutset="10px" Попробуй |
Поддержка border-image-outset
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-image-outset | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Синтаксис border-image-outset
border-image-outset: length|number|initial|inherit;
Примечание: CSS свойство border-image-outset может принимать от одного до четырех значений (верхняя, правая, нижняя и левая стороны). Если четвертое значение опущено, оно совпадает со вторым. Если третье значение также опущено, оно совпадает с первым. Если второй параметр также опущен, то он такой же, как и первый.
Значения border-image-outset
| Значение | Описание | Демонстрация |
|---|---|---|
| length | Единица измерения длины, указывающая, на каком расстоянии от краев будет отображаться изображение границы. Значение по умолчанию - 0 | Демо ❯ |
| number | Представляют собой значения, кратные соответствующей ширине границы | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме border-image-outset
CSS Учебник: CSS Границы Images
CSS Справочник: border-image свойство
CSS Справочник: border-image-repeat свойство
CSS Справочник: border-image-slice свойство
CSS Справочник: border-image-source свойство
CSS Справочник: border-image-width свойство
HTML DOM справочник: borderImageOutset свойство