Как сделать сетку (например, сетку для миллиметровки) с помощью 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

Поскольку вы упомянули линованную бумагу:

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 3

Что вы можете сделать, это взять изображение сетки, как это

затем добавьте его с помощью CSS

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

Так что да, не только CSS - вам также нужно изображение, но решение должно быть довольно чистым. Смотрите это в действии здесь: http://jsfiddle.net/bhVhV/

Answer 4

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