|
CSS3 Свойство border-image
 Полный 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;
} |
Попробуйте сами »
Еще примеры внизу этой страницы. |
Поддержка Браузерами
Свойство 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 Справочник
|
