3

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

这是我的 CSS 代码：

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

这段代码只允许我制作一行，我怎样才能制作多行？

4

4 回答 4

15

作为替代解决方案，这里有一个使用 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 在径向渐变方面非常有问题）。

于 2013-08-12T09:23:17.013 回答
3

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

另一种——我想更合适的方式——是使用水平和垂直重复的背景图像来实现这种效果。

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

或者，如果您可以使用渐变，nikhita dkslfslg 的回答（为此 +1）可能会有所帮助。

于 2013-08-12T09:22:23.237 回答
1

干得好。

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

}

只需在 base64 中编码图像，它就可以正常工作。

您可以尝试在 此处进行编码。

于 2016-02-15T20:17:11.973 回答
0

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

.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/

于 2013-08-12T09:34:49.787 回答