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＆amp; amp;创建的div的边框CSS就像你要求的设计。

也许一些jQuery / Javascript也可以用来“无限”地创建新的空div，但我不想使用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％。

基本上在较小距离（背景大小）的白线顶部应用蓝线。