如何用css制作网格(如图纸网格)？

Question

如何用css制作网格(如图纸网格)？我只想制作一个只使用CSS的虚拟网格纸.在此先感谢您的帮助.

Answer 1

在现代浏览器中,以下内容应该足够..

body {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

http://codepen.io/anon/pen/VvPWvv

这将产生一个虚线网格..

body {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}

https://codepen.io/anon/pen/xdqjRZ

http://caniuse.com/#search=linear-gradient

Answer 2

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;
}

Answer 3

一个人conic-gradient()就能完成这项工作

html {
  background:
    conic-gradient(from 90deg at 1px 1px,#0000 90deg,blue 0) 
    0 0/50px 50px;
}

另一个概念：

html {
  --s: 100px; /* control the size */
  
  --_g: #0000 90deg,#366 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g))
     0 0/var(--s) var(--s),
    conic-gradient(from 90deg at 1px 1px,var(--_g))
     0 0/calc(var(--s)/5) calc(var(--s)/5);
}

Answer 4

既然你提到了衬纸:

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);

最后一行:behavior: url(/PIE.htc);是一个名为css3pie的插件,它增加了对6-9的支持,我相信.事实上,这个例子来自他们的网站,其中有更多有趣的例子:http://css3pie.com/demos/gradient-patterns/

Answer 5

你能做的就是抓住像这样的网格图像

然后用CSS拼贴它

#background {
  background: url('path/to/grid-image.png');
}

所以是的,不仅是 CSS - 你还需要图像,但解决方案应该非常干净.在这里看到它:http://jsfiddle.net/bhVhV/

Answer 6

使用 svg 和 base64 完成。可以通过更改 svg 中的宽度、高度和颜色参数来修改比例和颜色。这是两个具有不同大小的蓝色和白色方形网格的示例。

.blue-square-grid-20px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='100%' height='100%' fill='%230000ff' /%3E%3Crect x='50%' width='2' height='100%' fill='%231ff' /%3E%3Crect y='50%' width='100%' height='2' fill='%231ff' /%3E%3C/svg%3E%0A");
}

.white-square-grid-40px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='%23ddd' /%3E%3Crect y='50%' width='100%' height='1' fill='%23ddd' /%3E%3C/svg%3E%0A");
}

.example-box {
  width: 100vw;
  height: 100px;
}

<p>blue grid, 20px grid size and 2px line width</p>
<div class="blue-square-grid-20px example-box"></div>
<p>white grid, 40px grid size and 1px line width</p>
<div class="white-square-grid-40px example-box"></div>