Свойство outline

Это старое свойство из спецификации CSS, которое в CSS3 было улучшено и теперь включаетв себя значение сдвига. Данное свойство применяется для создания втрой рамки, причем эта рамка может находиться на расстоянии от края элемента.

#mainbox {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #FFFFFF;

outline: 2px dashed #000099;

outline-offset: 30px;

}

К полю мы добавили рамку шириной 2px со смещением 15px. Свойство outline обладает теми же характеристиками и работает с теми же параметрами, что и свойство border. Свойству outline-offsetпередается только одно значение, выраженное в пикселах.

Свойство border-image

Эффекты, предлагаемые свойствами border и outline ограничиваются одинарными линиями и несколькими конфигурационными параметрами. Новое свойство border-image позволяет преодолеть это ограничение и предоставляет дизайнерам возможность создавать качественные и разнообразные рамки, не используя для этого специальных изображений.

Для тестирования этого свойства будем использовать изображения ромбов в формате PNG. Загрузим файл dimonds.png.

Свойство border-image берет в качестве основы для узора предоставленное вами изображение. Затем оно нарезает изображение на куски согласно переданным аргументам и размещает полученные куски вокруг объекта, выстраивая таким образом его рамку.

Чтобы добиться желаемого эффекта, нужно указатть три атрибута: имя файла изображения и его местоположение, размер фрагментов, которые должны быть вырезаны из изображения, и несколько ключевых слов, описывающих размещение фрагментов вокруг объекта.

#mainbox {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 29px solid;

border-image: url("diamonds.png") 29 stretch;

}

Правила, описанные в нашем сценарии, дают следующий результат: вокруг поля заголовка создается рамка шириной 29px, а для построения ее содержимого загружается изображение diamons.png. Значение свойства border-image, равное 29, объявляет размер фрагментов, а stretch – это один из методов размещения фрагментов вокруг поля.

Последний атрибут может принимать одно из трех значений. Ключевое слово repeat означает повторение фрагментов, вырезанных из изображения, необходимое число раз для того, чтобы полностью закрыть ими сторону элемента. Размер фрагментов не меняется, если места для фрагмента не хватает, он будет обрезан.

Ключевое слово round заставляет браузер учитывать длину стороны рамки, на которую накладываются фрагменты, и при необходимости растягивать их, чтобы ни один из фрагментов не был обрезан.

Наконец, ключевое слово stretch заставляет браузер закрывать сторону рамки одним-единственным фрагментом, растягивая его до нужного размера.

Для определения ширины рамки мы использовали свойство border, однако можно тоже применить свойство border-with и задать разные размеры для каждого элемента рамки (свойство border-with принимает четыре параметра, а его синтаксис аналогичен синтаксису и padding). То же самое можно сделать для вырезаемых фрагментов: добавить до четырех параметров, для того чтобы получить из исходного изображения фрагменты разных размеров.