Wie erstelle ich einen gepunkteten Rahmen mit runden Punkten in WebKit-Browsern?
In WebKit-getriebenen Browsern, z.B. Safari, Chrome, Rahmen mit ihrem Stil, der als dotted deklariert ist, werden mit quadratischen Punkten anstelle von runden dargestellt.
Gibt es eine Möglichkeit, das Rendern von runden Punkten über Browser hinweg zu erzwingen?
Referenztest
3 Antworten
Eine nativ unterstützte Lösung fehlt derzeit, da die Spezifikation diese Eigenschaften nicht explizit definiert und überlässt es der Browser-Implementierung.
Sie können jedoch SVG verwenden, um den Rahmen zu erstellen, da er die volle Kontrolle über die gewünschten Eigenschaften bietet.
Zeichnen Sie eine Linie, und definieren Sie dann die Attribute stroke-dasharray und stroke-linecap , um den gewünschten Effekt zu erzielen.
Beispiel Code Snippet
%Vor%Ergebnis-Snapshot
Demo
Referenzen (im Mozilla Developer Network)
Ich hatte auch dieses Problem, aber ich brauchte nur drei runde Punkte unter meinem Menüpunkt. Also habe ich nur einen schrecklichen Hack benutzt, aber es hat funktioniert: Zuerst habe ich FontAwesome mit @import eingebunden Dann wurden die runden Punkte als Inhalt in das CSS eingefügt:
%Vor%