CSS渐变产生虚线

Question

我需要打印textearea内容（用户输入），我只是使用css渐变来生成文本下方的行。以下css为我做了诀窍。

.linedText {
color: #000000;
line-height: 24px;

background-color: #ffffff;
background: -webkit-gradient(linear, 2% 2%, 2% 100%, from(#000000), color-stop(1%, #ffffff)) 0 -2px;
background: -webkit-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -ms-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -o-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;

-webkit-background-size: 100% 24px;
-moz-background-size: 100% 24px;
-ms-background-size: 100% 24px;
-o-background-size: 100% 24px;
background-size: 100% 24px;
}

<p class="linedText">fdfdfdfdfdfdf<br>dfdfd<br>fdf<br>df</p>

它产生如下：

现在我需要将样式更改为点缀。有人可以帮我吗？我有时试过它，但没有运气，所以想到了SO以便快速回应。

感谢。

Answer 1

This is an example了解如何实现自己的目标。

只需使用两个线性渐变，rgba colors = transparency，并使它们重叠以创建一个重复的模式。

它不是跨浏览器（仅限webkit）。只是一个让你入门的片段。

background-image: 
        -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        -webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);

background-size: 12px 24px;