Mehr Kontrolle über CSS-Ränder mit background-image

Sie können einen typischen CSS-Rand gestrichelt oder gepunktet machen. Zum Beispiel

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

Sie haben nicht viel Kontrolle darüber, wie groß oder lang die Striche oder Lücken sind. Und Sie können den Strichen sicherlich keine Schrägen, Verblassungen oder Animationen geben! Aber Sie *können* diese Dinge mit ein paar Tricks tun.

Amit Sheen hat diesen wirklich netten Dashed Border Generator erstellt.

Der Trick besteht darin, vier multiple Hintergründe zu verwenden. Die Eigenschaft background nimmt durch Kommas getrennte Werte an. Indem Sie vier Hintergründe (einen oben, rechts, unten und links) festlegen und sie so dimensionieren, dass sie wie ein Rand aussehen, schalten Sie all diese Kontrolle frei.

Also wie

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

Ich mag Gummibärchen.