Больше контроля над границами CSS с помощью background-image

Больше контроля над границами CSS с помощью background-image

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

Вы можете создать обычную CSS border пунктирной или точечной. Например:

Амит Шин построил этот действительно аккуратный генератор пунктирных границ:

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

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

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

Хитрость заключается в использовании четырех разных фонов. Свойство background принимает значения, разделенные запятыми, поэтому, установив четыре фона (один вдоль верхней, правой, нижней и левой) и задав их размеры похожими на границе, оно разблокирует все это управление. Например, так:

Автор: Chris Coyier

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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

Комментирование закрыто.