Различные стили рамок
Введение
Порой пытаясь достичь красивого отображения элементов мы придумываем крайне сложные метода, когда имеются очень простые способы. Для того чтобы сделать рамки элементов «красивыми» можно обойтись и без их рисования или вложенных элементов друг в друга для достижения желаемого эффекта. Достаточно лишь воспользоваться стилями CSS группы border: border-color, border-style и border-width, которые задают цвет, стиль и толщину границы рамки.
Рассмотрим несколько примеров.
Простая монотонная рамка
Для создания простых монотонных рамок достаточно установить border-style в положение solid, а через border-color и border-width задать нужные цвет и толщину рамки.
border-style: solid;
border-color: black;
border-width: 1px;
border-style: solid;
border-color: red;
border-width: 2px;
border-style: solid;
border-color: green;
border-width: 3px;
Пунктирная рамка
Для создания простых пунктирных монотонных рамок достаточно установить border-style в положение dashed, а через border-color и border-width задать нужные цвет и толщину рамки. Длина штрихов зависит от толщины рамки.
border-style: dashed;
border-color: black;
border-width: 1px;
border-style: dashed;
border-color: red;
border-width: 2px;
border-style: dashed;
border-color: green;
border-width: 3px;
Точечная рамка
Для создания простых точечных монотонных рамок достаточно установить border-style в положение dotted, а через border-color и border-width задать нужные цвет и толщину рамки. Размер точек зависит от толщины рамки.
border-style: dotted;
border-color: black;
border-width: 1px;
border-style: dotted;
border-color: red;
border-width: 2px;
border-style: dotted;
border-color: green;
border-width: 3px;
Двойная рамка
Для создания двойной рамки вовсе не обязательно создавать два вложенных элемента с простыми одинарными рамками. В отличие от рамок, описанных выше, для того, чтобы получилась двойная рамка, установить border-style в положение double недостаточно, еще необходимо, чтобы толщина «общей» рамки была больше трех пикселей. Через border-color задается цвет рамки. Через border-width задается толщина общей рамки, через которую и определяется толщина каждой из рамок и интервала между ними. У обеих рамок толщина всегда совпадает и равна толщине общей рамки деленной на число три. В случае, когда невозможно произвести целочисленное деление, производят деление с остатком, и если он равен числу два, то к каждой рамке прибавляют по единице толщины.
border-style: double;
border-color: black;
border-width: 1px;
border-style: double;
border-color: red;
border-width: 2px;
border-style: double;
border-color: green;
border-width: 3px;
border-style: double;
border-color: black;
border-width: 4px;
border-style: double;
border-color: red;
border-width: 5px;
border-style: double;
border-color: green;
border-width: 6px;
Рамка в виде борозды
Для создания рамки в виде борозды можно обойтись лишь рамкой вокруг одного элемента, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение groove, и сделать толщину рамки не менее двух пикселей. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.
border-style: groove;
border-color: black;
border-width: 1px;
border-style: groove;
border-color: red;
border-width: 2px;
border-style: groove;
border-color: green;
border-width: 3px;
border-style: groove;
border-color: black;
border-width: 4px;
border-style: groove;
border-color: red;
border-width: 5px;
Рамка в виде выреза
Для создания объемного эффекта сдавленности элемента, можно использовать рамку в виде выреза, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение inset. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.
border-style: inset;
border-color: black;
border-width: 1px;
border-style: inset;
border-color: red;
border-width: 2px;
border-style: inset;
border-color: green;
border-width: 3px;
Рельефная рамка
Для создания объемного эффекта рельефа элемента (обратный эффект вдавленности), можно использьзовать рельефную рамку, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение outset. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.
border-style: outset;
border-color: black;
border-width: 1px;
border-style: outset;
border-color: red;
border-width: 2px;
border-style: outset;
border-color: green;
border-width: 3px;
Рамка в виде хребта
Для создания рамки в виде хребта можно обойтись лишь рамкой вокруг одного элемента, без задания каждой границы по отдельности. Для того, чтобы получилась такая рамка, нужно установить border-style в положение ridge, и сделать толщину рамки не менее двух пикселей. Через border-color задается базовый цвет рамки, который определяет цвета отдельных элементов рамки. Разные браузеры могут по-разному подбирать цвета элементов рамки, основываясь на базовом цвете. Через border-width задается толщина рамки.
border-style: ridge;
border-color: black;
border-width: 1px;
border-style: ridge;
border-color: red;
border-width: 2px;
border-style: ridge;
border-color: green;
border-width: 3px;
border-style: ridge;
border-color: black;
border-width: 4px;
border-style: ridge;
border-color: red;
border-width: 5px;