Авторский знак. 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-slice.

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

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

Свойство границы-изображения-ломтик( border-image-slice) не поддерживается в Opera. Свойство границы-изображения-ломтик( border-image-slice) не поддерживается в Internet Explorer 10 и выше. Свойство границы-изображения-ломтик( border-image-slice) не поддерживается в Safari 5 и выше. Посмотрите на границы-изображения( border-image) вместо этого!

Определение и использование. Свойство границы-изображения-ломтик( border-image-slice) определяет внутренние смещения изображения-границы( border-image).

Внимание!!! Это свойство( border-image-slice) определяет внутренние смещения сверху, справа, снизу, и левого края изображения, разделив его на девять регионов: четырех углах, четыре ребра и средний. В средней части изображение отбрасывается( рассматривается как полностью прозрачный), если ключевое слово заливки нет. Если четвертый число/процент опущен, так же, как во втором. Если третий также опущен, так же, как первый. Если вторая также опущен, так же, как первый.

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


Синтаксис:

                     border-image-slice: number|%|fill;

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

Значение по умолчанию: 100%
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.borderImageSlice="50% 10%"


Значение Описание
number Числа представляют пикселей изображения( если изображение растровое изображение) или векторные координаты( если изображение в векторном изображении)
% В процентах относительно размера изображения: ширина изображения для горизонтального смещения, высота вертикального смещения. Значение по умолчанию-100%
fill Средней части границы изображения будут сохранены
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


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

< !DOCTYPE html>
< html>
< head>
< style> 
div
{
background-color:lightgrey;
border:30px solid transparent;
border-image: url('../fon/border.jpg');
border-image-slice: 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
< /style>
< /head>
< body>
< div>
< p>Это элемент DIV, который использует изображение в качестве границы.< /p>
< /div>
< p>Вот изображение, которое используется:< /p>
< img src="../fon/border.jpg">
< p>< b>Внимание!!!< /b> Internet Explorer 10, Opera и Safari 5 не поддерживают 
                                            border-image-repeat свойство.< /p>
< /body>
< /html>                      

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

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

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

Внимание!!! Internet Explorer 10, Opera и Safari 5 не поддерживают border-image-repeat свойство.




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
... ... ...

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

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