用於CSS和HTML背景的圓圈子彈

Question

CodePen here中的代碼提供了子彈，條紋和一些方塊。我想要圈子。我發現this source但我不知道如何實現它。

代碼也在這裏

@import url(https://fonts.googleapis.com/css?family=Oswald); 
div { 
text-align: center; 
font: bold 21px 'Oswald',sans-serif; 
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999; 
text-transform: uppercase; 
} 
.dotted { 
padding: 2.25em 1.6875em; 
background-image: -webkit-repeating-radial-gradient(45px 45px, circle cover, rgba(0,0,0,.90), rgba(0,0,0,.90) 2px, transparent 0px, transparent 100%); 
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
-webkit-background-size: 9px 9px; 
-moz-background-size: 9px 9px; 
background-size: 9px 9px; 
} 

Answer 1

你可以通過改變半徑做到這一點，請注意rgba(0,0,0,0.5) 4px而不是rgba(0,0,0,0.5) 1px關於background-image:的第一道防線。

代碼

.dotted { 
    padding: 2.25em 1.6875em; 
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,0.5) 4px, transparent 1px, transparent 100%); 
    background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
    background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
    background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
    -webkit-background-size: 3px 3px; 
    -moz-background-size: 3px 3px; 
    background-size: 10px 10px; 
    }