[imtoken平台]仅使用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); } 这就是你的意思吗

仅使用css创建多条等距水平线,css,Css,是否可以仅使用CSS创建多条水平等距线？我试图复制一个记事卡的外观，我不想使用图像。看来这应该是可能的。看起来这个人完成了我想做的事情，但他们使用的是mozilla特定的标签： 如果我包含一个fiddle链接，我想我必须添加代码。 该页面中的CSS： div { background: -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transp

所以你只想有人更新/扩展渐变语法？我有一半的答案，所以我只想评论一下：如果有，它可能不适合跨浏览器。所以我会使用背景图像和base64编码图像。这在技术上是纯粹的CSS旁注：我知道你想要一种纯CSS的方式来呈现你要写文本的便笺卡上的线条，而不是便笺卡下代表多张卡片的线条。我喜欢这个想法，有没有一个网站可以帮助我创建一个我想要的base64编码图像？快速谷歌搜索出现了几个教程：。这可能已经在这里得到了回答：我想他可能在寻找这个外观，这是正确的，科里，也许这不可能只有CSS box-shadow:0 1px 0 1px #fff, 0 2px 0 1px #ccc, 0 4px 0 1px #fff, 0 5px 0 1px #ccc;

css

是否可以仅使用CSS创建多条水平等距线？我试图复制一个记事卡的外观，我不想使用图像。看来这应该是可能的。看起来这个人完成了我想做的事情，但他们使用的是mozilla特定的标签：

如果我包含一个fiddle链接，，我想我必须添加代码。 该页面中的CSS：