CSS3 Zaokrąglone i przerywane obramowania?

Question

Czy można utworzyć obramowanie w CSS3 w taki sposób, że są one zaokrąglone i przerywane?

mam zaokrąglenia moje rogi ale pojawiają się one stały się:

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

Reszta granicy jest przerywana ale rogi są stałe.

Rozumiem, że jest to charakterystyczne dla Firefoksa, ale na razie jest to w porządku.

Dzięki

Answer 1

It'a bug w firefox.see to issue, mozilla nie obsługuje zaokrąglonego rogu dla przerywanej i przerywanej granicy.

Answer 2

Tak, teoretycznie można mieć granic przerywane i zaokrąglone, ale jak widzieliście praktycznie przeglądarek mogą nie obsługiwać go jeszcze.

Answer 3

Jednym z rozwiązań jest użycie wielu obrazów tła. Możesz użyć tej metody, aby określić inne background-image dla czterech narożników.

Możesz również dodać piąty obraz do środkowego obrazu tła (powtórz, jeśli to konieczne).

Coś wzdłuż linii ...

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

} 

Answer 4

Moje rozwiązanie tego problemu jest

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

upewnić się, że obraz jest tylko jedna kropka kropka z jakiejś białej przestrzeni na stronie to kłębie . Potem powinieneś być dobry.