От автора: на днях я столкнулся с необходимостью установить границы элемента CSS с трех сторон и подумал, что было бы интересно рассмотреть всевозможные способы сделать это. Ни один из них не является особенно сложным, но, возможно, вы считаете один из них наилучшим из-за четкости синтаксиса, эффективности или чего-то другого.
Предположим, нам нужна граница внизу, слева и справа (но не сверху) элемента.
Явное объявление для каждой стороны
|
1 2 3 4 5 |
.three-sides { border-bottom: 2px solid black; border-right: 2px solid black; border-left: 2px solid black; } |
Хотя это довольно понятно, здесь все еще используется сокращение. Полностью свойства выглядели бы так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.three-sides { border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 2px; border-left-color: black; border-left-style: solid; border-left-width: 2px; border-right-color: black; border-right-style: solid; border-right-width: 2px; } |
Заблокировать одну из сторон
Вы можете получить небольшое количество кода, объявив сокращением границу со всех четырех сторон, а затем удалив ту, которая не нужна:
|
1 2 3 4 |
.three-sides { border: 2px solid black; border-top: 0; } |
Только сокращенная ширина
|
1 2 3 4 5 6 |
.three-sides { border-color: black; border-style: solid; /* top, right, bottom, left - так же, как для margin и padding */ border-width: 0 2px 2px 2px; } |
Здесь все довольно интересно, так как вам не нужно объявлять цвет границы, чтобы получить границу, потому что цвет наследует currentColor! Так что это будет нормально работать:
|
1 2 3 4 5 |
.three-sides { /* цвет не объявлен */ border-style: solid; border-width: 0 2px 2px 2px; } |
И вы получили бы красные границы, если бы сделали:
|
1 2 3 4 5 |
.three-sides { border-color: red; border-style: solid; border-width: 0 2px 2px 2px; } |
Удивительно, но факт. Если вы хотите указать цвет явно, то можете использовать парочку сокращений, примерно так:
|
1 2 3 4 |
.three-sides { border: solid green; border-width: 2px 0 2px 2px; } |
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
