Question

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

这是我的CSS代码：

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

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

Answer 1

作为替代解决方案，使用CSS here编写了一个漂亮的衬纸效果。

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;

Browser Support ：模式本身应适用于Firefox 3.6 +，Chrome，Safari 5.1，Opera 11.10+和IE10 +。但是，实现限制可能会导致其中一些不受限制即使在那些浏览器上也能正确显示（例如，在... 写作时，Gecko的径向渐变非常多。）

Answer 2

使用您的方式，您必须插入多个这些元素。你不能简单地重复它们。

另一个 - 我想更合适的方式 - 将使用水平和垂直重复的背景图像来实现此效果。

body {
    background: transparent url(path/filename) repeat 0 0;
}

或者，如果你可以使用渐变，nikhita dkslfslg's answer（对此+1）可能有帮助。

Answer 3

你走了。

.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");

}

只需在base64中对图像进行编码即可正常工作。

您可以尝试编码HERE。

Answer 4

你可以用箱子阴影来做到这一点：

.lines{
    width:500px;
    height:400px;
    background: red;
    box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}

http://jsfiddle.net/7DkKc/

或者仅仅使用图片：

.lines{
    background: transparent url(url) 0 0 repeat-x;
}

或者使用渐变色。

http://www.colorzilla.com/gradient-editor/

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

4 个答案: