CSS3 Abgerundete und gepunktete Grenzen?

Ist es möglich, einen Rahmen in CSS3 so zu erstellen, dass sie gerundet und punktiert sind?CSS3 Abgerundete und gepunktete Grenzen?

ich meine Ecken Runden aber sie scheinen solide mit:

border: 1px dotted gray; 
-moz-border-radius-topright: 30px 20px; 
-moz-border-radius-topleft: 30px 20px;

Der Rest der Grenze gepunkteten ist aber die Ecken sind solide.

Ich verstehe, dass dies für Firefox spezifisch ist, aber das ist in Ordnung für jetzt.

Dank

Quelle

2010-09-15 jmcmahon

Es ist ein Fehler in firefox.Siehe diese issue, unterstützt Mozilla abgerundete Ecke für gepunktete und gestrichelte Grenze nicht.

Quelle

2010-09-15 13:51:17

Fünf Jahre später und dieser Fehler ist immer noch da ..:/ – dschu

Machen Sie es sechs ...! – Buzinas

Das wird (endlich) [in der nächsten Version] (https://developer.mozilla.org/en-US/Firefox/Releases/50#CSS) von Firefox im November behoben: "Ecken mit abgerundeten Ecken und gestrichelten Ecken und punktierte Stile werden jetzt mit dem angegebenen Stil anstelle eines soliden Stils gerendert " – vard

Ja, theoretisch können Sie gepunktete und abgerundete Ränder haben, aber wie Sie praktisch Browser gesehen haben es noch nicht unterstützen.

Quelle

2010-09-15 13:47:23 RoToRa

Ja fand ich den Bug-Report - https://bugzilla.mozilla.org/show_bug.cgi?id=382721 – jmcmahon

Eine Lösung besteht darin, mehrere Hintergrundbilder zu verwenden. Mit diesem Ansatz können Sie für die vier Ecken einen anderen background-image angeben.

Sie können auch ein fünftes Bild für das mittlere Hintergrundbild hinzufügen (falls erforderlich wiederholt).

Etwas nach dem Vorbild von ...

.dashed-rounded-border { 

    border: 2px dashed blue; 

    background-image: url("top-left.png"), url("top-right.png"), url("bottom-right.png"), url("bottom-left.png"), url("center.png"); 
    background-position: left top, right top, right bottom, left bottom, center center; 
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x; 

    -webkit-border-radius: 22px; 
    -moz-border-radius: 22px; 
    border-radius: 22px; 

}

Quelle

2015-02-25 11:39:50

Meine Lösung für dieses Problem ist

background: url('../images/dot.png'); 
background-size: 4px; 
background-position: bottom left; 
background-repeat: repeat-x;

stellen Sie sicher, das Punktbild mit einigen weißen Raum nur einen Punkt auf Widerrist Seite davon ist . Danach solltest du gut sein.

Quelle

2017-03-30 15:22:31

CSS3 Abgerundete und gepunktete Grenzen?

Antwort

Verwandte Themen