|
Могут быть установлены следующие параметры границы:
| Наименование | Значение | Пример |
|---|
| 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;">
Тест использования атрибутов границы элемента <DIV>
</DIV>
ВНИМАНИЕ!!! При использовании данного фрагмента кода поместите все правила атрибута class=tag>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. Реализация последних четырех стилей зависит от конкретного браузера. Следовательно, при их реализации необходимо все проверять и проверять. Большое значение, в этом случае, имеют параметры цвета границы, цвета фона и ширины границы. Поэкспериментируйте немного для получения желаемого эффекта.
Перейти к рубрике --> CSS |
