Использование границ (border) при верстке

border

Всем привет!

Сегодня я хочу поговорить с Вами об одном очень эффективном инструменте, который очень прост, но в то же время позволяет придать элементам Вашего сайта неповторимости.
Мы будем говорить о границах (border).

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

Но давайте обо всем по порядку.

1. Основы свойства border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом. Браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента страницы, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Пример:

.box{
     border: 3px solid blue;}

Данная конструкция отобразит границу для элемента с идентификатором класса «box». Граница обрисована со всех сторон элемента. Ширина ее будет 3 пикселя, стиль границы — линия и цвет синий. Также эти же инструкции можно написать отдельно:

.box{
     border-width: 3px;
     border-style: solid;
     border-color: blue;}

Эта конструкция полностью идентична предыдущей.

Итак, свойство border-width задает ширину границы в пикселях, пунктах и т.д. Кроме этого может принимать значение одной из констант: thin (2px), medium (4px), thick (6px).

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведен в таблице.

Число значений Результат
1 Толщина границы будет установлена для всех сторон элемента.
2 Первое значение устанавливает толщину верхней и нижней границы, второе  — левой и правой.
3 Первое значение задает толщину верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

Свойство border-style определяет внешний вид границы. Может принимать одно из следующих значений:

dotteddashedsoliddouble

grooveridgeinsetoutset

В этом примере ширина всех границ — 3 пикселя.

Ну а с border-color все намного проще. Эта инструкция задает цвет границы.

2. Скругление углов с помощью свойства border-radius

Еще сегодня я хотел поговорить про круглые углы. Раньше углы скругляли исключительно при помощи фоновых картинок (то есть на месте углов вставляли блоки с фоновыми картинками скругленных углов).

Теперь все намного проще. Есть CSS свойство border-radius. Оно устанавливает радиус скругления уголков границы. Если границы не заданы, то скругление также происходит и с фоном.

.box{
     border-radius: 10px 20px 5px 10px;}

border-radius также, как и свойство border-width может использовать одно, два, три или четыре значения, разделенных между собой пробелами. Эффект зависит от количества значений и приведен в таблице.

Число значений Результат
1 Радиус указывается для всех четырех уголков.
2 Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

Кроме этого допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока. В случае задания двух параметров через слэш, первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рисунке показана разница между обычным скругленным уголком и эллиптическим уголком.

css_border-radius

Таким образом можно создать неповторимые эллиптические границы. Пример:

.box{
    border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;}

3. Сочетание всех свойств границ.

Если умело сочетать все свойства границ, то можно достигнуть довольно интересных сочетаний. Главное — не бояться экспериментировать. Вот несколько примеров.

В этих примерах также используется свойство box-shadow (тень). Но оно немного из другой оперы. Так что мы его рассматривать сегодня не будет.

Ну и напоследок хочу сказать, что еще есть возможность использовать для прорисовки границ — картинки. Но эта тема немного сложнее, поэтому мы опишем ее завтра в самостоятельной отдельной статье.

Подписывайтесь на обновления и до встречи завтра.

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.