Wie wird die Linienbreite in einem diagonalen Rahmen mit einem wiederholenden linearen Gradienten beibehalten?

Question

Ich versuche repeating-linear-gradient auf einem Rahmen zu verwenden, der eine 1px breite Linie mit 6px Abstand zwischen jeder Zeile hat.

Kann mir jemand sagen, was ich falsch mache, damit die Zeilen nicht die gleiche Breite haben, wenn sie sich wiederholen? Ich habe versucht, die Pixelwerte zu optimieren, aber sie stimmen nie überein.

JSFiddle

background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px); 

Answer 1

Basierend auf this CSS Tricks article by Ana scheint es, wie der Browser Unterschiede hat Rendering, wenn es um repeating-linear-gradient kommt. Es gibt Vergleich Screenshots am Ende des Artikels, die zeigt, wie der Rendering in Firefox unter Windows korrekt ist, aber nicht so in Chrome unter Windows und Firefox auf OS X.

Lösung:

Eine Lösung scheint Setzen Sie background-size und machen Sie zwei Striche Teil des Gradienten (im Gegensatz zu dem Code in Frage, wo es nur einen Strich gibt). Die Hintergrundgröße wird als der letzte Farbstopppunkt (14px) dividiert durch die Quadratwurzel von 2 (was ungefähr 10px entspricht) berechnet.

Die Einstellung background-size ist obligatorisch, da dies in Opera, Chrome nicht funktioniert. Es scheint die Linie ein bisschen dicker zu machen, aber es scheint zumindest besser zu funktionieren als vorher.

Dies funktioniert in Chrome, Opera, Rand, IE11, Firefox unter Windows und Firefox auf OS X.

.border { 
 
    background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 7px, transparent 7px, transparent 8px, #fff 8px, #fff 14px); 
 
    background-size: 10px 10px; /* equal to last color stop point/sqrt(2) - 14/1.414 */ 
 
    height: 50px; 
 
}

<div class="border"></div>

Unten ist der Screenshot von Firefox auf OS X (dank web-tiki für den Screenshot).