Закрыть   X

  •    
  •    
Печать

border-image

Автор: Алексей Елизаров.

CSS свойство border-image

Поддержка браузеров

 

Описание

 

Свойство border-image используется для указания значений таких свойств, как: border-image-source, border-image-width, border-image-slice, border-image-outset и border-image-repeat в одном объявлении. Данные свойства можно использовать, например для создания красивых кнопок.

Если какое-либо значение было не установлено, то оно будет установлено в значение по умолчанию для соответствующего свойства.


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


Значения свойства

Значение Описание
border-image-source Указывает путь к изображению, которое будет использоваться в качестве границ рамки.
border-image-slice Смещение изображения границы внутрь.
border-image-width Определяет ширину для изображения-границы.
border-image-outset Указывается величина, на которую распространяется область изображения-границы за пределы границ элемента.
border-image-repeat Определяет, как будет отображаться изображение, заданное для рамки: растягиваться, повторяться или масштабироваться.

div{
border-width:15px;
width:250px;
padding:10px 20px;
}
#round{
-moz-border-image:url("chrome.png") 30 30 round; /* Firefox */
-webkit-border-image:url("chrome.png") 30 30 round; /* Safari и Chrome */
-o-border-image:url("chrome.png") 30 30 round; /* Opera */
border-image:url("chrome.png") 30 30 round;
}


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки