CSS3 Đường viền tròn và chấm chấm?

Question

Có thể tạo đường viền trong CSS3 sao cho chúng được làm tròn và chấm không?

Tôi làm tròn các góc của tôi, nhưng chúng xuất hiện rắn với:

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

Phần còn lại của biên giới là rải rác nhưng các góc là rắn.

Tôi hiểu rằng điều này dành riêng cho Firefox nhưng điều đó vẫn tốt cho đến bây giờ.

Cảm ơn

Answer 1

Đó là lỗi trong firefox.see này issue, mozilla không hỗ trợ góc tròn cho đường viền chấm và đứt nét.

Answer 2

Vâng, về mặt lý thuyết bạn có thể có biên giới rải rác và tròn, nhưng như bạn đã thấy thực tế các trình duyệt có thể không hỗ trợ nó được nêu ra.

Answer 3

Một giải pháp là sử dụng nhiều hình nền. Bạn có thể sử dụng phương pháp này để chỉ định một khác nhau background-image cho bốn góc.

Bạn cũng có thể muốn thêm hình ảnh thứ năm cho hình nền trung tâm (lặp lại, nếu cần).

cái gì đó dọc theo dòng của ...

.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

Giải pháp của tôi cho vấn đề này là

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

chắc chắn rằng các dấu chấm hình ảnh chỉ là một dấu chấm với một số không gian màu trắng trên mặt khô héo của nó . Sau đó bạn nên tốt.