Page 122 - Сила CSS3 Освой новейший стандарт

122 • Глава 3. Линованная бумага

Таблица 3.3. Поддержка свойства border-image в браузерах
IE Firefox Opera Safari Chrome

Нет Частично: с префиксом Частично, начиная Частично, Частично
-moz-, начиная с 3.5 с версии 10.5 с префиксом -webkit-

Конкретный способ наложения изображений на поле и его рамку зависит от третьей
составляющей свойства border-image — значения, определяющего повторение.
В нашем примере мы используем значение stretch, которое заставляет браузер
растягивать все четыре изображения для рамки на все доступное пространство (то
же самое происходит и с центральным фрагментом, но не с фрагментами, закрыва-
ющими углы), как на рис. 3.16. Можно также добавить значение repeat (рис. 3.17),
round (рис. 3.18) или space. (В настоящее время значение round поддерживается
только в браузерах Firefox и Opera.) Ни один из браузеров не поддерживает значение
space, поэтому у меня нет возможности показать вам снимок экрана!

Рис. 3.16. Так работает свойство border- Рис. 3.17. Так работает свойство border-
image со значением stretch image со значением repeat

Рис. 3.18. Так работает свойство border-image со значением round

Добавление изображения оторванного края
Давайте, наконец, добавим свойство border-image в блок div нашей статьи, чтобы
страница стала похожа на вырванный из блокнота лист бумаги, как на рис. 3.12.
Изображение необходимо наложить только на левый отрезок рамки, поэтому для
начала мы увеличим его размер до 50 пикселов (ширина изображения), а остальные
отрезки той же рамки сделаем невидимыми, нулевой ширины:
#paper {
float: left;
margin: 40px;
padding: 3.2em 1.6em 1.6em 1.6em;
border-width: 0 0 0 50px;

www.trk.kg