БлогСфера

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

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

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

}

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

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

CSS .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.

Источник

YII2 — проверенный временем фреймворк под любые задачи