CSS 和 HTML 背景的圆形项目符号

Question

CodePen里面的代码here provides bullets, stripes and some squares. I want circles. I found 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;
  }

CSS 和 HTML 背景的圆形项目符号

Circle bullets for background with CSS and HTML

html

css

background

repeat

codepen