所有角落的css输入边框半径会导致奇怪的阴影

Question

我正在创建一个像输入框一样的“圆角”，在 CSS 中圆角时它创建了这个奇怪的阴影，我似乎无法弄清楚是什么导致了它

.form-wrapper {
    display:flex;
    justify-content: center;
    margin: 2em 0px;


}
    .password-input input{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    input {
        width:400px;
        padding: 3em;
    }
    input::placeholder {
        color: gray;
    }
    .email-input input{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

<form>
  <div class="input-field email-input">
    <input id="email" type="text" class="validate" placeholder="Enter Your Email Adress"/>
  </div>
  <div class="input-field password-input">
    <input id="password" type="text" class="validate" placeholder="Enter Your Password"/>
  </div>
</form>

Answer 1

它的意图并不奇怪。该input元素正在采取的默认样式边框。

您需要覆盖input标签的默认边框样式。使用border: 1px solid silver;覆盖默认的边框样式输入。

.form-wrapper {
    display:flex;
    justify-content: center;
    margin: 2em 0px;
}
.password-input input{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
input {
    width:400px;
    padding: 3em;
    border: 1px solid silver;  /* <-- Override default border */
}
input::placeholder {
    color: gray;
}
.email-input input{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

<form>
  <div class="input-field email-input">
    <input id="email" type="text" class="validate" placeholder="Enter Your Email Adress"/>
  </div>
  <div class="input-field password-input">
    <input id="password" type="text" class="validate" placeholder="Enter Your Password"/>
  </div>
</form>