Firefox 中的 HTML 按钮和边框宽度

Question

这是我的 HTML 按钮:

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

这是它在 Firefox 中的样子:

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

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

变成这样:

1- 对于任何 border-width 值，它都不会恢复到原来的形状。

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;
}