Html 如何仅用 css 制作网格（如方格纸网格）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3540194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a grid (like graph paper grid) with just css?
提问by Amir Rustamzadeh
How to make a grid (like graph paper grid) with just css? I just want to make a virtual grid paper with only using CSS. Thanks in advance for the help.
如何仅用 css 制作网格（如方格纸网格）？我只想用 CSS 制作一张虚拟网格纸。在此先感谢您的帮助。
采纳答案by chacham15
Since you mentioned lined paper:
既然你提到了横格纸：
div {
background-color: #fff;
background-size: 100% 1.2em;
background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);
background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);
background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);
background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);
background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);
-pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
behavior: url(/PIE.htc);
}<div style="width: 200px; height: 200px"></div>The last line: behavior: url(/PIE.htc);is a plugin called css3pie that adds support for ie 6-9 I believe. In fact this example is taken from their website where there are plenty more interesting examples: http://css3pie.com/demos/gradient-patterns/
最后一行：behavior: url(/PIE.htc);是一个名为 css3pie 的插件，我相信它增加了对 ie 6-9 的支持。事实上，这个例子取自他们的网站，那里有很多更有趣的例子：http: //css3pie.com/demos/gradient-patterns/
回答by shunryu111
To make grids you can use CSS gradients, which work on all modern browsers (see Caniuse).
要制作网格，您可以使用 CSS 渐变，它适用于所有现代浏览器（请参阅 Caniuse）。
Use linear gradients to draw a lined grid:
使用线性渐变绘制带内衬的网格：
body {
background-size: 40px 40px;
background-image:
linear-gradient(to right, grey 1px, transparent 1px),
linear-gradient(to bottom, grey 1px, transparent 1px);
}Use a radial gradient to draw a grid with dotted corners:
使用径向渐变绘制带有点角的网格：
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}回答by Mathew stephen
body {
background:
linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(-90deg, #aaa 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(#aaa 1px, transparent 1px),
#f2f2f2;
background-size:
4px 4px,
4px 4px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
}回答by Yi Jiang
What you can do is grab a grid image like this one:
您可以做的是抓取像这样的网格图像：
Then tile it with CSS:
然后用 CSS 平铺它：
#background {
background: url('path/to/grid-image.png');
}
So yeah, it's not onlyCSS – you also need the image, but the solution should be quite clean. Here it is in action:
所以是的，它不仅是CSS – 您还需要图像，但解决方案应该非常干净。这是在行动：
#background {
width: 200px;
height: 160px;
background: url('http://i.stack.imgur.com/GySvQ.png');
}<div id="background"></div>