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>

它生成如下：

现在我需要将样式更改为虚线。请问有人可以帮我做吗？我有时尝试过，但没有运气，所以想到了快速响应。

谢谢。

Answer 1

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

这只是使用 rgba 颜色 = 透明度的两个线性渐变并将它们重叠以创建要重复的图案的问题。

它不是跨浏览器（仅限 webkit）。只需一个 sn-p 即可帮助您入门。

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;