使用 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

你可以通过改变半径来做到这一点，注意第一行关于background-image:的rgba(0,0,0,0.5) 4px而不是rgba(0,0,0,0.5) 1px。

代码

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