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

Дата публикации: 2020-09-11

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

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

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

.box {

border: 1px dashed black;

border: 3px dotted red;

}

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

CodePen Embed Fallback

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

.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;
}

.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);