CSS背景漸變圖案 - 虛線

Question

我想要在https://meta.stackexchange.com/上重新創建背景圖案，並想知道是否可以通過CSS漸變實現？

我已經成功地做到了廣場，但加入虛線被證明是麻煩。

background-color: #16A6DA; 
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent); 
background-size:50px 50px; 

http://jsfiddle.net/04fjos8x/

Answer 1

那麼它不是語義，但它是你要求我在想：

http://cssdeck.com/labs/full/zfogyyuf

我創造了很多空白的div元素，並添加邊框，這些div的。使用僅使用HTML & CSS創建的div的邊框就像您請求的設計。

也許一些jQuery/Javascript也可能被用於那裏「無限」創建新的空divs，但我不想使用JavaScript，因爲它只是一個簡單的例子。

Answer 2

我建議你看看下面的鏈接。他們是CSS發電機，可以爲您節省一些時間。我希望他們能幫助你。

Ultimate CSS Gradient Generator

Linear gradients

CSS background patterns - this is good

Answer 3

http://jsfiddle.net/04fjos8x/1/

應用您最初的網格來你的HTML，然後將此你的身體：

body { 
width: 100%; 
background-image: linear-gradient(0deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent); 
background-size: 10px 10px; 
height: 100%; 
} 

確保您的html將其寬度和高度設置爲100％。

基本上在較小距離（背景大小）的白線上應用藍線。