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

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

34 px

30 px
27 px

25 px
Рис. 3.14. У этого изображения неровные Рис. 3.15. По обозначенным линиям изо-
края, которые можно растянуть бражение виртуально «нареза-
и выложить мозаикой, ется» на кусочки, которые затем
применив свойство border- натягиваются или накладывают-
image ся на отрезки рамки

Первая часть значения border-image — это путь
Удивительно, но, указывая в свой- к изображению, и он работает точно так же, как
стве border-image размер фраг- любой другой путь в коде CSS.
ментов для нарезки изображения,
единицы измерения (px) добав- Затем идет последовательность из одного или
лять не нужно. В качестве аль- нескольких чисел, обозначающих места разреза
тернативы можно использовать изображения. В нашем примере мы добавили
проценты, обозначающие ширину четыре значения, так как с каждого края отреза-
фрагментов по отношению к раз- ются фрагменты разной ширины. Первое значе-
меру самого изображения — и в ние, 30 — это смещение внутрь от верхней кром-
этом случае необходимо после ки изображения, заданное в пикселах. Второе,
числового значения добавлять
символ %. 25 — это смещение внутрь от правой кромки;
третье — смещение внутрь от нижней кромки; и
четвертое — от левой. Браузер разрезает изобра-
жение по этим линиям, получая в результате девять фрагментов, которые он затем
накладывает на каждый из отрезков рамки, на ее углы и внутреннюю часть поля.

Центральный Фрагмент
Центральный фрагмент нарезанного изображения закрывает всю внутреннюю область
поля внутри рамок. Это не самое интуитивно понятное решение, однако оно обеспечивает
определенные возможности стилизации. Если вы не хотите, чтобы центр изображения, пред-
назначенного для оформления рамки, закрывал фоновое изображение или фоновый цвет
поля, то откройте программу для обработки графики, сделайте центральный фрагмент этого
изображения прозрачным и сохраните его в файле GIF или PNG с поддержкой прозрачности.
В спецификации говорится, что по умолчанию центральный фрагмент отбрасывается,
если только вы не добавили в список значений border-image слово fill. Однако создается
впечатление, что в настоящее время ни один браузер ключевое слово fill не поддерживает,
и они все по умолчанию заполняют центр поля, причем возможность отменить заполнение
не предусмотрена.

www.trk.kg