用垂直或水平线填充div

Question

如何使用垂直或水平线填充{{​​1}}？我去年做了这个，找不到代码，不知道搜索除了“填充div与行”之外的其他内容没有产生任何相关结果。

这是一张显示我的意思的图片：

如果可能，我真的更愿意使用纯CSS。

Answer 1

您应该尝试使用水平定向的CSS线性渐变并沿同一轴重复：

div {
    background-image: linear-gradient(to left, #c8d9ff 50%, transparent 50%);
    background-size: 4px 100%;
}

我们只需要指定中间色标（50％），因为忽略0％和100％停止时，浏览器的渲染引擎将自动从两个中间色标的每一端推断颜色。这相当于更长（和不必要）的代码：

div {
    background-image: linear-gradient(to left, #c8d9ff 0%, #c8d9ff 50%, transparent 50%, transparent 100%);
    background-size: 4px 100%;
}

说明：

1. 您可能希望为此添加供应商前缀，因为所有浏览器可能不支持最新的linear-gradient规范，具体取决于您的用户群体。
2. 您可能希望为旧版浏览器指定一个实体background-color，以便重新使用。

请参阅此处的概念验证示例： JSFiddle

Answer 2

你可以用重复的线性渐变来做到这一点。

https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

Answer 3

嘿，你只需要线条？或div内的一个小div？

对于水平线，您可以使用以下标记。

<hr/>

Answer 4

这是一种可能的解决方案（jsfiddle：http://jsfiddle.net/nmL78/）：

HTML：

<div class="stripe"></div>

CSS：

.stripe{
    background-color: blue;
    width:100%;
    height: 50px;
    top:50px;
    position: absolute;
}

随意调整CSS ...