Главная
К библиотеке
Military.com Free Screensavers!

Границы в CSS2
Спецификация 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/

Hosted by uCoz