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

Усложнение фона • 121

коротко о СвойСтве bordEr-ImaGE
Свойство border-image входит в модуль Backgrounds and Borders (Фон и границы), который
вы найдете по адресу http://www.w3.org/TR/css3-background. Это собирательное свойство,
однако отдельные свойства использовать пока что невозможно, так как никакие браузеры
не поддерживают их объявление за пределами свойства border-image.
Внутри свойства border-image вы задаете путь к изображению и указываете, на каком
расстоянии от каждого края производится разрез. Кроме того, можно выбрать способ
повторения каждого фрагмента изображения (за исключением углов) вдоль соответству-
ющего отрезка рамки.
Допускается использование от одного до четырех значений ширины отрезанных фрагмен-
тов; ваш выбор зависит от того, нужны вам фрагменты одинаковой ширины или разной.
Если указано одно значение, то оно применяется ко всем четырем сторонам изображения;
если два, то первое применяется к верхнему и нижнему краю, а второе к правому и левому;
среди трех значений первое применяется к верхнему краю, второе к правому и левому,
а третье к нижнему; если заданы все четыре значения, то они последовательно применя-
ются к краям изображения, начиная с верхнего, по часовой стрелке. На рис. 3.15 показана
схема нарезки изображения, предназначенного для оформления рамки.
Задать способ повторения можно четырьмя ключевыми словами: stretch, repeat, round
и space. Если указано только одно значение, оно применяется ко всем четырем сторонам;
если два, то первое применяется к верхнему и нижнему отрезкам рамки, а второе —
к правому и левому. Значение repeat заставляет браузер последовательно заполнять все
четыре отрезка рамки и центр поля копиями изображения; stretch означает растягивание
изображения по размеру соответствующей области; round — это заполнение копиями
с масштабированием, для того чтобы ни одна из копий не была обрезана; space означает
заполнение рамки копиями без масштабирования — они равномерно распределяются
вдоль отрезков, и между копиями остаются равные промежутки.
Не забывайте, что в дополнение к border-image всегда нужно определять свойство border-
width, задающее ширину рамки, иначе ее невозможно будет заполнить изображениями.
Также существует свойство border-image-width, но в настоящее время его не поддерживает
ни один из браузеров, точно так же они не поддерживают border-image-outset.
К сожалению, изображения нельзя накладывать на рамки, скругленные с помощью свой-
ства border-radius.
Помимо создания эффекта оторванной страницы, свойство border-image можно применять
для решения следующих задач:
• создание кнопок (см. http://ejohn.org/blog/border-image-in-firefox);
• градиентные фоны;
• украшение рамок поля зубцами — так его можно сделать похожим на марку или
лотерейный билет;
• оформление поля в «деревянную рамку» — как картину или сертификат (см. http://
www.norabrowndesign.com/css-experiments/border-image-frame.html);
• скругление угла поля или просто изменение угла стыка на более острый или тупой;
• создание скругленных или заостренных падающих теней для полей (box-shadow по-
зволяет создавать только прямые тени, однако вы можете нарисовать неправильную
тень и встроить ее в рамку поля).

www.trk.kg