输入元素上的border-top不是“直的”

Question

我正在将CSS边框应用于输入元素，然后应用更粗的border-top样式。为什么这有一个奇怪的重叠效应？

input {
  width: 50%;
  border: 1px solid #ccc;
  border-top: 15px solid #414042
}

<input type="text" placeholder="NOME" required>

JSFIDDLE

这是左上角的细节：

为什么会发生这种情况，我该如何解决？

Answer 1

尝试使用没有模糊的box-shadow，你必须添加一个边距

input {
    background-position: left 10px top 25px;
    background-repeat: no-repeat;
    background-size: 10px auto;
    border: 1px solid #ccc;
    color: #414042;
    font-size: 25px;
    font-stretch: condensed;
    font-style: normal;
    font-weight: lighter;
    padding: 15px;
    text-indent: 20px;
    width: 50%;
    box-shadow: 0px -15px 0px 0px #414042;
    margin-top: 15px;
}

<input type="text" placeholder="NOME" required>

Answer 2

将border-style设置为solid并使用border-width将解决此问题。

＆＃13;

＆＃13;

input {
    background-position: left 10px top 25px;
    background-repeat: no-repeat;
    background-size: 10px auto;
    color: #414042;
    font-size: 25px;
    font-stretch: condensed;
    font-style: normal;
    font-weight: lighter;
    padding: 15px;
    text-indent: 20px;
    width: 50%;
    border-style: solid;
    border-width:1px;
    border-top:15px solid #414042
}

＆＃13;

<input type="text" placeholder="NOME" required/>

＆＃13;

＆＃13;

＆＃13;