Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Границы блоков

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

Каждая граница может иметь свой цвет, толщину и тип линии. Чтобы задать все эти вещи, к каждой границе через дефис необходимо приписать цвет (color), толщину (width) и тип линии (style). Например:

border-top-color
border-top-width
border-bottom-width
border-right-style

Также для всех границ сразу можно задать эти свойства. Делается это при помощи сокращённой записи свойства border:

Выше указаны сокращённые виды записи для задания цвета, толщины и стиля (типа линий) всех четырёх границ сразу.

Значение свойства width задаётся при помощи одного из трёх ключевых слов:

  1. thin - тонкая граница;
  2. medium - средняя граница;
  3. thick - толстая граница.

Толщину линий можно задавать также в любых единицах длины главное, чтобы значение было положительное.

Задать цвет линии можно тоже тремя способами, с которыми мы познакомились в главе Свойства CSS. Цвет и фон.

Тип линии задаётся при помощи ключевых слов, их 9 штук:

  1. none - граница отсутствует, отсутствует соответственно толщина и цвет тоже, поэтому эти свойства можно не задавать. Используется по умолчанию;
  2. dotted - линия границы состоит из точек;
  3. solid - сплошная линия границы;
  4. dashed - граница в виде пунктирной линии;
  5. double - граница отображается в виде двойной сплошной линии. Толщина двойной сплошной линии задаётся при помощи свойства width, то есть сумма линий + расстояние между ними = border-width;
  6. groove - граница в виде вдавленной линий, которая имитирует объём;
  7. ridge - граница в виде выпуклой линии, имитирующей объём;
  8. inset - при использовании этой границы, блок кажется визуально вдавленным;
  9. outset - блок кажется выпуклым.

Внешний вид блоков, с различными границами вы можете посмотреть здесь.

В том случае, если требуется задать единый стиль для всех границ, правильнее будет воспользоваться сокращенной записью свойства border, в которой через пробел указываются: толщина, тип линии и цвет, причём именно в таком порядке. Например:

border: 1px solid red;

На этом всё.


<<Предыдущая | В раздел | Следующая>>