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

存在这个奇怪的阴影，因为您具有无边界的边界半径。只需添加所需颜色的边框即可。

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

<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 2

在HTML5输入标签中写一个CSS border 属性！

.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 #ccc;
}

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 3

默认情况下，输入中没有边框，因此您可以添加border:1px solid color，否则将不显示任何内容

.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 #ccc;
    }
    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 4

这不是其预期的奇怪行为。 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>

Answer 5

我在另一个here栈上找到了另一个问题的解决方案

添加border:none并解决之后的样式，这对我来说仍然很奇怪。

  border: none; /* <-- This thing here */
  border:solid 1px #ccc;

Answer 6

为什么不简化事情？

Include/pyport.h

css输入边框半径在所有角上都会引起奇怪的阴影

6 个答案: