html - 带有 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;
  }