IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

 IZONE 


Границы в CSS

Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам. Могут быть установлены следующие параметры границы:

Наименование Значение Пример
border-width Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая). border-width: 1px;
border-width: thick;
border-color Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно. border-color: black;
border-color: transparent;
border-style Задает стиль рисования границы. Подробное описание следует ниже. border-style: solid;
border-color: dashed;

Кроме подробного описания каждого атрибута границы, можно применять сокращенную форму в таком виде: border: [border-width] [border-style] [border-color]

Спецификация CSS2 позволяет задать стили для каждой из сторон границы (к сожалению, это реализовано только в браузерах Internet Explorer и Opera). Такие правила записываются следующим образом: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Таким образом { border-top-width: 1px } будет означать, что ширина верхней границы должна быть 1 пиксель.

Для примера рассмотрим следующую модель:

Тест использования атрибутов границы элемента <DIV>

Вот код:

<DIV STYLE="background: silver; 
     border-style: solid; 
     border-width: 2px;
     border-top-color: red;
     border-right-color: green;
     border-bottom-color: blue;
     border-left-color: yellow;
     padding: 10px;">
Тест использования атрибутов границы элемента &lt;DIV&gt;
</DIV>

ВНИМАНИЕ!!! При использовании данного фрагмента кода поместите все правила атрибута STYLE в одну строку! Разбивка на строки сделана для улучшения форматирования!
Наименование Описание Вид
(приведен вид в вашем браузере)
none Граница отсутствует  
hidden Тоже, что и none, но при использовании в таблицах интерпретируется особым образом  
dotted Граница из точек.
dotted
dashed Граница из коротких отрезков линии
dashed
solid Непрерывная линия
solid
double Граница из двух линий. Сумма ширины каждой линии и промежуток между ними равняется значению border-width
double
groove Граница выглядит так, как будто она вырезана в фоне.
groove
ridge Эффект, противоположыный groove.
ridge
inset Вне таблиц создает эффект "вдавленности"
inset
outset Эффект, противоположный inset
outset

Здесь опять надо заметить, что не все эти стили реализованы в ведущих браузерах. Стили dotted и dashed реализованы только в браузере Opera. Реализация последних четырех стилей зависит от конкретного браузера. Следовательно при их реализации необходимо все проверять и проверять. Большое значение, в этом случае, имеют параметры цвета границы, цвета фона и ширины границы. Поэкспериментируйте немного для получения желаемого эффекта.

Источник: http://exper.ural.ru/

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.