Эффекты, предлагаемые свойствами border и outline, ограничиваются одинарными линиями и несколькими конфигурационными параметрами. Новое свойство border-image позволяет преодолеть это ограничение и предоставляет дизайнерам возможность создавать качественные и разнообразные рамки, не используя для этого специальных изображений.
Для тестирования этого свойства будем использовать изображение ромбов в формате PNG. Загрузите файл diamonds. png с нашего веб-сайта, перейдя по ссылке http://www.minkbooks.com/content/diamonds. png, и скопируйте его в папку, где находится ваш CSS-файл.
Свойство border-image берет в качестве основы для узора предоставленное вами изображение. Затем оно нарезает изображение на куски согласно переданным аргументам и размещает полученные куски вокруг объекта, выстраивая таким образом его рамку (рис. 3.1).
Чтобы добиться желаемого эффекта, нужно указать три атрибута: имя файла изображения и его местоположение, размер фрагментов, которые должны быть вырезаны из изображения, и несколько ключевых слов, описывающих размещение фрагментов вокруг объекта.
Модификации, описанные в листинге 3.18, дают следующий результат: вокруг поля заголовка создается рамка шириной 29 пикселов, а для построения ее содержимого загружается изображение diamonds. png. Значение свойства border-image, равное 29, объявляет размер фрагментов, а stretch — это один из методов размещения фрагментов вокруг поля.
Рис. 3.1. Узор, на основе которого будем строить рамку; ширина каждого фрагмента 29 пикселов
Листинг 3.18. Создаем собственную рамку для поля заголовка
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 29px;
-moz-border-image: url("diamonds. png") 29 stretch; — webkit-border-image: url("diamonds. png") 29 stretch; border-image: url("diamonds. png") 29 stretch;
Последний атрибут может принимать одно из трех значений. Ключевое слово repeat означает повторение фрагментов, вырезанных из изображения, необходимое число раз для того, чтобы полностью закрыть ими сторону элемента. Размер фрагментов не меняется, если места для фрагмента не хватает, он будет обрезан. Ключевое слово round заставляет браузер учитывать длину стороны рамки, на которую накладываются фрагменты, и при необходимости растягивать их, чтобы ни один из фрагментов не был обрезан. Наконец, ключевое слово stretch (которое мы использовали в листинге 3.18) заставляет браузер закрывать сторону рамки одним-единственным фрагментом, растягивая его до нужного размера.
Для определения ширины рамки мы использовали свойство border, однако можно также применить свойство border-with и задать разные размеры для каждого элемента рамки (свойство border-with принимает четыре параметра, а его синтаксис аналогичен синтаксису margin и padding.). То же самое можно сделать и для вырезаемых фрагментов: добавить до четырех параметров, для того чтобы получить из исходного изображения фрагменты разных размеров.
Замените кодом из листинга 3.18 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.
Добавить комментарий