CSS漸變產生虛線

我需要打印一個textearea內容（用戶輸入），我只是使用css漸變在文本下面生成線條。下面的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>

它產生類似以下內容：

printed textarea

現在我需要的改變風格點綴。任何人都可以爲我做這個嗎？我有時試過，但沒有運氣，所以想到了快速回應。

謝謝。

來源

2014-03-13 sovan

您可能可以使用border-bottom而不是背景，這樣您可以將樣式設置爲點。 – Josiah

http://stackoverflow.com/questions/15252597/how-to-add-a-dotted-underline-beneath-html-text – Zoxac

使用border-bottom：1px虛線＃f00; –

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;

來源

2014-03-13 13:22:47

謝謝阿梅爾。這工作。 – sovan

CSS漸變產生虛線

回答

相關問題