无法掩盖盒子阴影和输入字段之间的差距

Question

尝试为课程（ODIN项目）创建基本网站布局。但是，我注意到他们的网站设计具有完美的盒子阴影，没有轻度差距。无论我尝试多少我尝试弄乱框Shadow属性设置，似乎都在盒子阴影和输入字段之间存在一个小的1-2px差距。这是非常明显的，有点破坏了设计。我是CSS的新手，希望有人经验丰富的人能将我带入一个好的解决方案。

.form-flex-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
    
input {
  width: 215px;
  height: 20px;
  border-radius: 3px;

  border: 1.5px solid #e5e7eb;
}
input[type="text"] {
  padding-left: 9px;
}

input:focus {
  outline-color: #4a6ed6;
  border: none;
  box-shadow: 2px 2px 5px #bebebe;

}

label {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2e3a4b;
  margin-bottom: 3px;
  /* margin-left: 2px; */
  /* float: left; */
}

<form action="post">
  <div class="form-row-1">
    <div class="form-flex-container">
      <label for="first-name">First Name</label>
      <input type="text" name="first-name" id="first-name" />
    </div>
    <div class="form-flex-container">
      <label for="last-name">Last Name</label>
      <input type="text" name="last-name" id="last-name" />
    </div>
  </div>
  <div class="form-row-2">
    <div class="form-flex-container">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />
    </div>
    <div class="form-flex-container">
      <label for="phone-number">Phone Number</label>
      <input type="text" name="phone-number" id="phone-number" />
    </div>
  </div>
  <div class="form-row-3">
    <div class="form-flex-container">
      <label for="password">Password</label>
      <input type="text" name="password" id="password" />
    </div>
    <div class="form-flex-container">
      <label for="confirm-password">Confirm Password</label>
      <input type="text" name="confirm-password" id="confirm-password" />
    </div>
  </div>
</form>
    

我使盒子阴影变暗，这样您就可以更清楚地看到差距。

Answer 1

所以我发现了什么问题。显然，由于某种原因，当我使用属性概述宽度和概述时，它实际上并没有针对输入下的轮廓：focus选择器。我必须使用速记概述：1PX实心＃4A6ED6;以摆脱差距。所以现在它起作用了。

参见文档。

Answer 2

而不是使用border：无您可以将其设置为1.5px实心＃4A6ED6并删除uterline：

input {
  width: 215px;
  height: 20px;
  border-radius: 3px;
  border: 1.5px solid #e5e7eb;
}

input:focus {
  // outline-color: #4a6ed6;
  outline: none;
  border: 1.5px solid #4a6ed6;
  box-shadow: 2px 2px 5px #bebebe;
}

<form action="post"> 
  <div class="form-row-1">
    <div class="form-flex-container">
      <input type="text" name="first-name" id="first-name" />
    </div>
  </div>
</form>