css间隔线长度,创建多个均匀间隔的水平线，只有css

是否可以使用CSS创建多个水平均匀间隔的线？我正在尝试复制记事卡的外观，并且我不希望使用图像。似乎这应该是可能的。它看起来像这个人完成了我想做的事情，但他们正在使用mozilla特定标签：Fiddle创建多个均匀间隔的水平线，只有css

猜我必须添加代码，如果我包括一个小提琴链接。 从该页面的CSS：

div {

background:

-moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;

border: 1px solid #f6f6f6;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

margin: 30px auto;

padding: 22px 15px 40px;

position: relative;

width: 400px;

color: #444;

}

h1 {

font: 24px/26px 'Helvetica Neue', Arial;

margin: 0 0 6px;

}

li {

font: 12px/16px Georgia;

margin: 0 0 7px;

}

div:before {

content: '';

z-index: -1;

width: 433px;

position: absolute;

bottom: -12px;

left: 4px;

height: 190px;

box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);

background: -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;

-moz-transform: rotate(-1deg);

}

div:after{

content: '';

z-index: -3;

width: 433px;

position: absolute;

bottom: -18px;

left: 6px;

box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);

height: 190px;

background: -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;

-moz-transform: rotate(-1deg);

}

+0

因此，所有你想要的是有人来更新/延长梯度语法？ http://www.colorzilla.com/gradient-editor/ –

+1

我有一个答案，所以我只是评论：如果有，它可能不是跨浏览器友好的。所以我会使用base64编码图像的'background-image'。这在技术上是“纯粹的CSS”。 :)(注：我知道你想要一个纯粹的CSS方式来渲染行* ON *注意卡(你会写文本)，而不是行* UNDER *代表多张卡片的注释卡。) –

+0

我喜欢那个想法，有没有一个网站能帮我创建一个我想要的base64编码图像？ –