Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 Свойство border-image


CSS Справочник Полный CSS Справочник

Пример

Указать изображение в качестве границы вокруг элемента div:

div
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Попробуйте сами »
Еще примеры внизу этой страницы.

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство border-image не поддерживается ни одним из основных браузеров.

Firefox поддерживает альтернативное свойство -moz-border-image.

Opera поддерживает альтернативное свойство -o-border-image.

Safari и Chrome поддерживают альтернативное свойство -webkit-border-image.


Определение и Использование

Свойство border-image это стенографическое свойство для указания свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat.

Пропущенные значения устанавливаются в значения по умолчанию для соответствующих свойств.

Совет: Используйте свойства border-image-* для конструирования замечательных масштабируемых кнопок!

Значение по умолчанию: none 100% 1 0 stretch
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.borderImage="url(border.png) 30 30 round"


Синтаксис

border-image: источинк разбиение толщина выступ повторение;

Значение Описание
border-image-source Путь к изображению, используемому в качестве границы
border-image-slice Внутренние смещения изображения-границы, определяющие 9 фрагментов изображения, которые будут использоваться для построения границы
border-image-width Толщина изображения-границы
border-image-outset Величина, на которую простирается область границы изображения за пределы блока границы
border-image-repeat Должно ли изображение-граница повторяться, масштабироваться или растягиваться


Примеры

Попробуйте сами - Примеры

Кнопка с границей-изображением
Этот пример демонстрирует, как создать кнопку со изображением в качестве границы.


Смотрите Также

CSS3 уроки: CSS3 Границы


CSS Справочник Полный CSS Справочник

© 2011-2017 Уроки CSS
Рейтинг@Mail.ru