html - 显示单独的线而不是边框

Question

我不确定如何制作一条单独的线，如此图所示。

这就是我正在做的:

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

我添加了这个 html 来显示边框线:

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

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

Answer 1

如果您想要创建一个有两种颜色/单独内衬的 <hr> ，这是您可以做到的一种方式

如果近距离放大，您可以看到线条上半部分和下半部分的颜色差异

我添加了一个较暗的背景，所以你可以注意到颜色的不同

.separate-line {
    background-color: #fff;
    color:#fff;
    height: 2px;
    border:0;
    border-top:2px solid #aaa;
}

input {
  width: 96%;
  margin-left:2%;
}

body {
  background-color: #ddd;
}

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

对于 Firefox(某些原因必须将 hr 高度加倍):

.separate-line {
    background-color: #fff;
    color:#fff;
    height: 4px;
    border:0;
    border-top:2px solid #aaa;
}

input {
  width: 96%;
  margin-left:2%;
}

body {
  background-color: #ddd;
}

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