Gestrichelte Umrandung mit CSS-Gradient

Ich versuche herauszufinden, wie Sie eine gestrichelte Umrandung hinzufügen, die in den neuesten Firefox, Chrome, Safari und IE10 + Browsern gleich aussehen wird. Gewöhnliche 1px dashed #000 funktioniert nicht für mich, weil es in allen Browsern unterschiedlich ist, und image skaliert nicht.Gestrichelte Umrandung mit CSS-Gradient

Ich versuche herauszufinden, wie dies durch CSS-Farbverlauf zu tun.

Es wäre cool, wenn es die Möglichkeit gibt, Strichlänge zu steuern.

Quelle

2016-11-08 Rantiev

Mögliche Duplikat [Kontrolle der gestrichelten Rahmen Hublänge und Abstand zwischen den Strichen] (http://stackoverflow.com/questions/2771171/control-the-striched-border-hub-length-und-distance-zwischen-strokes) – secelite

Dies kann auch helfen, zu verstehen, wie dash + Farbverlauf produziert werden kann - http://StackOverflow.com/questions/32500570/gradient- Linie-mit-gestrichelten-Muster/32501799 # 32501799 (Ich bin mir nicht sicher, ob Sie einen gestrichelten Rand bedeutet * us ing * Farbverlauf oder eine gestrichelte Grenze * mit * Farbverlauf) – Harry

Gestrichelte Grenze mit CSS-Gradienten erstellt, wird das nächste Mal genauer sein, danke. – Rantiev

Sie können border-image verwenden dafür:

div { 
 
    width: 100px; 
 
    height: 50px; 
 
    border: 10px solid transparent; 
 
     -webkit-border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    -o-border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    border-image: url('http://www.w3schools.com/cssref/border.png') 30; 
 
    }

<div></div>

Quelle

2016-11-08 15:22:09 Justinas

Was ist mit ie10-11? Wird es dort funktionieren? Es ist wichtig. Wie ich schrieb, möchte ich nicht Bild verwenden, ich verwendete, um ein Bild des einzelnen Gedankenstrichs in der Vergangenheit zu schneiden, aber doent wie diese Lösung. – Rantiev

@Rantiev Wenn Sie sich auf Browser-Standardstile verlassen, akzeptieren Sie, dass sich Stile je nach Browser und Betriebssystem ändern können – Justinas

Ich möchte den gleichen gestrichelten Rand mit Gradienten in der Browser-Liste, die ich zur Verfügung gestellt habe. – Rantiev

Gestrichelte Umrandung mit CSS-Gradient

Antwort

Verwandte Themen