Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - border-image.

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

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Опера поддерживает альтернативу, свойство границы изображения( -o-border-image). Safari5 поддерживает альтернативу, свойство-WebKit-границы изображения( -webkit-border-image).

Определение и использование. Свойство границы изображение border-image является сокращенным свойством для установки border-image-source , border-image-slice , border-image-width , border-image-outset and border-image-repeat properties. Опущенные значения устанавливаются в значения по умолчанию. Внимание!!! Используйте пограничные изображения-*( border-image-*) свойства, чтобы построить красивые масштабируемые кнопки!

Самое мощное здесь даже не в том, что производится некое изменение некого участка страницы сайта. Самое мощное здесь в том, что свойство border-image, которое действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера.


Синтаксис:

              border-image: source slice width outset repeat|initial|inherit;

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

Значение по умолчанию: 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 образ-граница должна быть повторена, округлые или растягивается
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


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

< !DOCTYPE html>
< html>
< head>
< style> 
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}

#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
< /style>
< /head>
< body>

border-image свойство определяет изображение, которое будет использовано в качестве границы.< /p> < div id="round">Здесь, изображение плиточное( повторные), чтобы заполнить область.< /div> < br> < div id="stretch">Здесь, изображение растянется на весь район.< /div> < p>Здесь это изображение, которое используется:< /p> < img src="../fon/605.jpg"> < /body> < /html>

Результат программы:

border-image свойство определяет изображение, которое будет использовано в качестве границы.

Здесь, изображение плиточное( повторные), чтобы заполнить область.

Здесь, изображение растянется на весь район.

Здесь это изображение, которое используется:




seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: