如何使用css繪製多條水平線（筆記本紙效果）？

我想在我的博客上做一個筆記本紙，並且我想在其中製作水平線。我成功地能夠使用CSS繪製一條水平線，但我無法找到重複它的方式，以便它可以填充整個頁面。如何使用css繪製多條水平線（筆記本紙效果）？

這裏是我的CSS代碼：

.horizontalLines { 
border-bottom: 2px solid #CCCCCC; 
padding-top: 25px; 
width: 100%; 
}

此代碼只允許我做只有一條線，我怎樣才能使多行？

來源

2013-08-12 Salman Sheikh

你可以顯示你應用到的HTML嗎？這將有助於我們理解你想如何達到這個目標...... – Joum

你的HTML幫助我們回答。 –

http://lea.verou.me/css3patterns/#lined-paper – thirtydot

使用你的方式，你必須插入多個這些元素。你不能簡單地重複它們。

另一種方法 - 我想更合適的方法 - 將使用背景圖像，您可以水平和垂直重複以實現此效果。

body { 
    background: transparent url(path/filename) repeat 0 0; 
}

或者，如果你可以用漸變，nikhita dkslfslg's answer（+1爲）可能的幫助。

來源

2013-08-12 09:22:23 insertusernamehere

匿名downvoter再次罷工。： -/ – insertusernamehere

D'aww。 +1爲你（如果OP要避免梯度） – geekchic

作爲一種替代解決方案，使用CSS可用here編寫了一個美觀的內襯紙效果。

background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 
linear-gradient(#eee .1em, transparent .1em); 
background-size: 100% 1.2em;

Browser Support：自己應該在Firefox 3.6 +，Chrome瀏覽器，Safari瀏覽器5.1，歌劇11.10+和IE10 +工作模式。但是，實現限制可能會導致其中的一些不被正確顯示，即使在這些瀏覽器上（例如在編寫時，Gecko在徑向漸變方面也相當麻煩）。

來源

2013-08-12 09:23:17 geekchic

謝謝你，你的答案解決了我的問題。 :) –

你可以用盒子陰影做到這一點：

.lines{ 
    width:500px; 
    height:400px; 
    background: red; 
    box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue; 
}

http://jsfiddle.net/7DkKc/

或者乾脆用圖片：

.lines{ 
    background: transparent url(url) 0 0 repeat-x; 
}

或用梯度。

http://www.colorzilla.com/gradient-editor/

來源

2013-08-12 09:34:49 M1K1O

無法使用'box-shadow'完成。你懂的。 :)（有很多行，不只是三個）。 –

是的，但它是解決方案的一部分。最好的辦法是我的第二個答案。重複漸變。它們在SVG中生成。適合高清和視網膜顯示。 – M1K1O

你在這裏。

.paper { 
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");

}

只是進行編碼以base64圖像，它工作正常。

您可以嘗試編碼HERE。

來源

2016-02-15 20:17:11 Webduck

如何使用css繪製多條水平線（筆記本紙效果）？

回答

相關問題