Question

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

＆＃13;

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

＆＃13;

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

■ ■ ■   ● ● ●
■ ■ ■ → ● ● ●
■ ■ ■   ● ● ●

Answer 1

只需使用radial-gradient然后控制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;
}

圈子样式背景

1 个答案: