Firefox中的HTML按钮和边框宽度

Question

这是我的HTML按钮：

<input ID = "btnModel" value="Submit">

这就是它在Firefox中的样子：

但是当我给它的border-width一个值时：

input#btnModel{
    border-width:2px;
}

它变成这样：

1-对于任何边框宽度值，它不会返回其原始形状。

2-在chrome中，同样的事情发生，但仅限于3px以上且低于1px的边界值。因此，当border-width值返回到2px

时，它基本上会返回到其原始状态

3-我已经检查了此更改之前和之后的所有属性，它们几乎都是相同的。

有什么想法发生了？

Answer 1

我已编辑代码try this。

  

HTML：

<input  ID = "btnModel" value="Submit">

  

CSS：

input#btnModel{
border:4px solid #000;
background-color:#c00;
color:#fff;
text-align:center;
-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;
border-radius:6px;
}
input#btnModel:hover{
border-width:6px;
}