Рубрики
FrontEnd

Параметры свойств в CSS

Как известно, основной «строительный» материал HTML-страниц — это блоки. Любой элемент по сути является блоком, неким прямоугольником с четырьмя сторонами и четырьмя вершинами. Для изменения внешнего вида элементов мы используем свойства CSS, далее рассматриваются параметры свойств и их значения, и указывается то, на что эти параметры влияют.

Для наглядности возьмем блок для которого нарисуем рамки:

.block {
border: 1px solid #ccc;
}

 

В данном случае каждая сторона блока будет иметь рамку серого цвета, толщиной 1px, но что делать, если рамки должны иметь отличную друг от друга ширину?

Перепишем пример сперва так, что бы визуально ничего не изменилось:

.block {
border-style: solid;
border-color: #ccc;
border-width: 1px;
}

 

Вы можете легко убедиться, что внешность блока и толщина рамок остались теми же, просто изменился вид записи. При этом наличие всего одного параметра в свойстве толщины рамки говорит о том, что рамки со всех сторон будут иметь толщину равную 1px.

Будем изменять значения свойства border-width.

В следующем примере мы указываем два параметра:

border-width: 1px 2px;

 

В этом случае первый параметр отвечает за верх и низ, второй за право и лево. Таким образом получается, что рамка сверху и снизу будут шириной 1px, а справа и слева по 2px.

Указываем три параметра:

border-width: 1px 2px 3px;

 

Получается, что верхняя рамка имеет толщину 1px, правая 2px, нижняя 3px, а левая имеет ту же толщину, что и правая, то есть 2px.

И наконец, если мы используем все четыре параметра, то каждый отвечает за свою сторону:

border-width: 1px 2px 3px 4px;

 

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

Эта схема так же работает со свойствами padding, margin и с любыми свойствами, где участвуют стороны или углы блока.

Скругление углов при указании четырех параметров:

.block {
border-radius: 5px 10px 20px 40px;
-webkit-border-radius: 5px 10px 20px 40px;
-moz-border-radius: 5px 10px 20px 40px;
}

 

*для того, что бы скругления работали во всех современных браузерах мы используем соответствующие префиксы
Первый параметр отвечает за левый верхний угол и далее по часовой стрелке.