Как установить границу для трех сторон элемента CSS

Как установить границу для трех сторон элемента CSS

От автора: на днях я столкнулся с необходимостью установить границы элемента CSS с трех сторон и подумал, что было бы интересно рассмотреть всевозможные способы сделать это. Ни один из них не является особенно сложным, но, возможно, вы считаете один из них наилучшим из-за четкости синтаксиса, эффективности или чего-то другого.

Предположим, нам нужна граница внизу, слева и справа (но не сверху) элемента.

Явное объявление для каждой стороны

Хотя это довольно понятно, здесь все еще используется сокращение. Полностью свойства выглядели бы так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Заблокировать одну из сторон

Вы можете получить небольшое количество кода, объявив сокращением границу со всех четырех сторон, а затем удалив ту, которая не нужна:

Только сокращенная ширина

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Здесь все довольно интересно, так как вам не нужно объявлять цвет границы, чтобы получить границу, потому что цвет наследует currentColor! Так что это будет нормально работать:

И вы получили бы красные границы, если бы сделали:

Удивительно, но факт. Если вы хотите указать цвет явно, то можете использовать парочку сокращений, примерно так:

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree