用垂直或水平线填充 div

Question

div如何用垂直或水平线填充 a ？我去年这样做了，找不到代码，也不知道除了“用行填充 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