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