Различные стили рамок

Введение

Порой пытаясь достичь красивого отображения элементов мы придумываем крайне сложные метода, когда имеются очень простые способы. Для того чтобы сделать рамки элементов «красивыми» можно обойтись и без их рисования или вложенных элементов друг в друга для достижения желаемого эффекта. Достаточно лишь воспользоваться стилями CSS группы border: border-color, border-style и border-width, которые задают цвет, стиль и толщину границы рамки.

Рассмотрим несколько примеров.

Простая монотонная рамка

Для создания простых монотонных рамок достаточно установить border-style в положение solid, а через border-color и border-width задать нужные цвет и толщину рамки.

Пунктирная рамка

Для создания простых пунктирных монотонных рамок достаточно установить border-style в положение dashed, а через border-color и border-width задать нужные цвет и толщину рамки. Длина штрихов зависит от толщины рамки.

Точечная рамка

Для создания простых точечных монотонных рамок достаточно установить border-style в положение dotted, а через border-color и border-width задать нужные цвет и толщину рамки. Размер точек зависит от толщины рамки.

Двойная рамка

Для создания двойной рамки вовсе не обязательно создавать два вложенных элемента с простыми одинарными рамками. В отличие от рамок, описанных выше, для того, чтобы получилась двойная рамка, установить border-style в положение double недостаточно, еще необходимо, чтобы толщина «общей» рамки была больше трех пикселей. Через border-color задается цвет рамки. Через border-width задается толщина общей рамки, через которую и определяется толщина каждой из рамок и интервала между ними. У обеих рамок толщина всегда совпадает и равна толщине общей рамки деленной на число три. В случае, когда невозможно произвести целочисленное деление, производят деление с остатком, и если он равен числу два, то к каждой рамке прибавляют по единице толщины.

Рамка в виде борозды

Для создания рамки в виде борозды можно обойтись лишь рамкой вокруг одного элемента, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение groove, и сделать толщину рамки не менее двух пикселей. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.

Рамка в виде выреза

Для создания объемного эффекта сдавленности элемента, можно использовать рамку в виде выреза, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение inset. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.

Рельефная рамка

Для создания объемного эффекта рельефа элемента (обратный эффект вдавленности), можно использьзовать рельефную рамку, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение outset. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.

Рамка в виде хребта

Для создания рамки в виде хребта можно обойтись лишь рамкой вокруг одного элемента, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение ridge, и сделать толщину рамки не менее двух пикселей. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.

Вернуться в раздел «Информация»