如何绘制多个水平线（笔记本纸效果）使用css？ [英] How to draw multiple horizontal lines (Notebook Paper effect) using css?

问题描述

我想在我的博客上制作一个笔记本纸，我想在其中制作水平线。我成功地能够使用CSS绘制一条水平线，但我无法找到一种方式重复它，以便它可以填充整个页面。

I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.

这里是我的CSS代码：

Here is my CSS code:

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

这段代码只允许我做一行，作为一个替代解决方案，有一个美丽的衬纸效果使用CSS写的

This code only allows me to make only one line, how can i make multiple lines?

推荐答案

/lea.verou.me/css3patterns/#lined-paper\">在这里。

As an alternate solution, there's a beautiful lined paper effect written using CSS available 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;

浏览器支持 ：模式本身应适用于Firefox 3.6+，Chrome，Safari 5.1，Opera 11.10+和IE10 +。但是，实现限制可能会导致一些不被正确显示的
，即使在这些浏览器上（例如在
编写时，Gecko在径向渐变中也是有问题的）。

Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).

这篇关于如何绘制多个水平线（笔记本纸效果）使用css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！