圈子样式背景

Question

我知道制作虚线背景图案是多么容易.

body {
  background: linear-gradient(90deg, #eee 30px, transparent 1%) center, 
    linear-gradient(#eee 30px, transparent 1%) center, #444;
  background-size: 34px 34px;
}

请告诉我圈子而不是方块有多容易？

? ? ?   ? ? ?
? ? ? ? ? ? ?
? ? ?   ? ? ?

Answer 1

只需使用径向渐变然后控制background-size颜色停止的%和/或%来实现所需的模式:

body {
  background: radial-gradient(circle at center, #000 20%, transparent 22%),#eee; 
  background-size: 34px 34px;
}

body {
  background: radial-gradient(circle at center, #000 10%, transparent 12%),#eee; 
  background-size: 50px 50px;
}

您还可以使用SVG创建一个圆圈并将其与背景一起使用.

body {
 background-image: url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="20" fill="#000" /></svg>'); 
  background-size: 30px 30px;
}

如果您需要考虑更复杂的形状,SVG可以是更通用的解决方案:

body {
 background-image: url('data:image/svg+xml,<svg height="200" width="200"  xmlns="http://www.w3.org/2000/svg" ><polygon points="100,10 40,198 190,78 10,78 160,198" fill="#000" /></svg>'); 
  background-size: 30px 30px;
}