CSS渐变以产生虚线 [英] CSS gradient to produce dotted line

问题描述

我需要打印textearea内容（用户输入），我只是使用CSS渐变来生成文本下面的行。下面的css为我打电话。

I needed to print a textearea content (user input) and I just used css gradient to produce lines below the text. The following css did the trick for me.

.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>

它生成如下：

现在我需要更改样式点到点。任何人都可以为我做它吗？我尝试了有时，但没有运气，所以想到了为快速反应。

Now I need to change the style to dotted. Can anyone do it for me please? I tried it for sometimes, but no luck, so thought of SO for a quick response.

谢谢。

推荐答案

这是一个例子如何实现你

这只是使用两个线性渐变与rgba颜色=透明度，并使它们重叠创建一个模式重复的问题。

It's just a matter of using two linear gradients with rgba colors = transparency and make them overlap to create a pattern to be repeated.

这不是跨浏览器（webkit）。

It's not cross browser (webkit only). Just a snippet to get you started.

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;

这篇关于CSS渐变以产生虚线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！