Kazan Daemon
Вторник, 18 декабря 2018 года — новости часа
Быстрая связь
Если Вы желаете задать вопрос или оставить запрос на оформление заказа, пожалуйста, заполните все поля формы.






Контакты
Телефон: +7 (495) 956-88-50 доб. 210687
Телефон: +7 (812) 309-58-26 доб. 210687
Факс: +7 (495) 956-82-62 доб. 210687

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

Введение

Порой пытаясь достичь красивого отображения элементов мы придумываем крайне сложные метода, когда имеются очень простые способы. Для того чтобы сделать рамки элементов «красивыми» можно обойтись и без их рисования или вложенных элементов друг в друга для достижения желаемого эффекта. Достаточно лишь воспользоваться стилями 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;

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

© 2009-2018 Студия Kazan Daemon