Html 显示单独的行而不是边框

我不知道如何制作一个单独的线，如图所示

这就是我正在做的：

.separate-line {
    background-color: #D8D9DE;
    border-width: 0;
    color: #D8D9DE;
    height: 1px;
}

我添加此html以显示边框线：

<div>
<hr class="separate-line">
<input...>
</div>

---

结果显示正常边界。但是我想显示一条单独的水平线。

如果您希望创建一条双色/单独的线条

，这是一种可以做到的方法

如果放大，你可以看到线条上半部分和下半部分之间的颜色差异

我添加了一个较暗的背景，这样你就可以注意到颜色的差异

。分隔行{
背景色：#fff；
颜色：#fff；
高度：2倍；
边界：0；
边框顶部：2倍实心#aaa；
}
输入{
宽度：96%；
左缘：2%；
}
身体{
背景色：#ddd；
}

如果您希望创建一个双色/独立线条的

，这是您可以做到的一种方法

如果放大，你可以看到线条上半部分和下半部分之间的颜色差异

我添加了一个较暗的背景，这样你就可以注意到颜色的差异

。分隔行{
背景色：#fff；
颜色：#fff；
高度：2倍；
边界：0；
边框顶部：2倍实心#aaa；
}
输入{
宽度：96%；
左缘：2%；
}
身体{
背景色：#ddd；
}

您好，试试这个，这可能会对您有所帮助，因为您需要一个单独的边框

 hr {
display: block;
border-style: inset;
border-width: 2px;
background-color: #D8D9DE;
 }

---

您可以使用

边框宽度增加边框：

您好，试试这个，这可能会对您有所帮助，因为您需要一个单独的边框

 hr {
display: block;
border-style: inset;
border-width: 2px;
background-color: #D8D9DE;
 }

---

您可以使用

边框宽度增加边框：

您可以看到有两个边框。输入容器的边框顶部是1px和白色，另一个是边框底部，它是1px，颜色可能是#e0e0（我不确定颜色）。您可以看到有两个边框。输入容器的边框顶部是1px和白色，另一个是边框底部，它是1px，颜色可能是#e0e0（我不确定颜色）。完美！非常感谢。我在chrome上的测试看起来不一样。更多的空白。我使用的是chrome 53，看起来很正确。。有更多的空白是因为我将hr高度增加到2px，而不是您的1px。如果你想让它更薄更完美，你可以把它改回去！非常感谢。我在chrome上的测试看起来不一样。更多的空白。我使用的是chrome 53，看起来很正确。。有更多的空白是因为我将hr高度增加到2px，而不是您的1px。如果你想让它更薄，你可以把它改回去