如何使用 css 创建虚线表格/图表背景？ [复制]答案

【问题标题】：How to create a Dotted Grid/Graph Sheet background using css? [duplicate]如何使用 css 创建虚线表格/图表背景？ [复制]
【发布时间】：2020-02-11 22:18:53
【问题描述】：

如何使用 CSS 创建点网格纸背景，就像下图中的那样？

【问题讨论】：

标签： html css

【解决方案1】：

一个简单的方法是使用大多数浏览器支持的background: repeating-linear-gradient();。你可以在caniuse.com查看浏览器支持

这是一个有效的代码 sn-p：

.gridBackground {
  background: repeating-linear-gradient(transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px),
              repeating-linear-gradient(0.25turn, transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px);
}

/*  Reset & other Formatting CSS  */
body{
  margin: 0; padding: 0;
  width: 100vw; height: 100vh;
  color: #fff;
  font-family: monospace;
  font-size: 1.5rem;
  text-align: center;
}
.gridBackground{
  display: flex;
  align-items: center; justify-content: center;
  width: 100%; height:100%; 
}

<div class="gridBackground">
  You like Grid Backgrounds,<br/>don't you?
</div>

希望这会有所帮助...

和平?

【讨论】：

这不是真的简单易行..而且我们没有点

【解决方案2】：

我认为一个简单的radial-gradient 可以帮助您，尤其是避免代码中出现大量重复

body {
   background      : radial-gradient(#000 4px, transparent 5px);
   background-size : 50px 50px;
}

您可以通过更改background-size来调整点之间的距离

【讨论】：