html - CSS渐变产生虚线

Question

我需要打印文本区域内容(用户输入)，我只是使用 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 颜色 = 透明度并使它们重叠以创建要重复的图案的问题。

它不是跨浏览器的(仅限 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;