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

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

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

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

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

CSS

1234.box {   border: 1px dashed black;   border: 3px dotted red;}

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

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

CSS

123456.box {  background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px);  background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;  background-position: 0 0, 0 0, 100% 0, 0 100%;  background-repeat: no-repeat;}

Автор: Chris Coyier

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

Источник

READ
YII2 — проверенный временем фреймворк под любые задачи
Оценить статью
Блог о самом интересном.
Добавить комментарий