Автор статьи: Головин Андрей
>Абидно, но движок выключает любое описание стиля
Спецификация 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 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;»>
Тест использования атрибутов границы элемента <DIV>
</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. Реализация последних четырех стилей зависит от конкретного браузера. Следовательно, при их реализации необходимо все проверять и проверять. большое значение, в этом случае, имеют параметры цвета границы, цвета фона и ширины границы. Поэкспериментируйте немного для получения желаемого эффекта.
