如何使用css绘制多条水平线(Notebook Paper效果)？

Question

我想在我的博客上制作笔记本纸,我想在其中制作水平线.我成功地使用css绘制了一条水平线,但我无法找到重复它的方法,因此它可以填满整个页面.

这是我的CSS代码:

.horizontalLines {
 border-bottom: 2px solid #CCCCCC;
 padding-top: 25px;
 width: 100%;
}

这段代码只允许我只制作一行,如何制作多行？

Answer 1

作为一个替代的解决方案,还有利用现有的CSS编写漂亮的横格纸的效果在这里.

background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

浏览器支持:模式本身应适用于Firefox 3.6 +,Chrome,Safari 5.1,Opera 11.10+和IE10 +.但是,实现限制可能会导致其中一些甚至在这些浏览器上无法正确显示(例如在撰写本文时,Gecko在径向渐变时非常错误).