Firefox 中的 HTML 按钮和边框宽度

Question

这是我拥有的 HTML 按钮：

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

这是它在 Firefox 中的样子：

但是当我给它的边框宽度一个值时：

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

变成这样：

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

2- 在 chrome 中会发生同样的事情，但仅适用于超过 3px 且低于 1px 的边框值。所以基本上当border-width值返回到2px时它就会恢复到原来的状态

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

有什么想法吗？

Answer 1

我已经编辑了代码尝试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;
}