输入框添加padding后hover状态左侧边框异常变粗问题求助

问题出在background-clip的取值和padding-left的冲突上：你设置的background-clip: content-box让白色背景只覆盖内容区域，而padding-left:5px导致左侧padding区域没有被白色背景填充，hover时渐变边框在左侧的视觉效果和其他边产生差异。

修复方案如下，调整background-clip并统一初始边框宽度避免位移：

input {
    padding-left: 5px;
    border-radius: 5px;
    border: 2px solid rgba(237, 237, 237, 255); /* 统一边框宽度，防止hover时元素位移 */
}

#input2:hover {
    border: 2px double transparent;
    border-radius: 5px;
    background-image: linear-gradient(white, white),
                      linear-gradient(45deg, #63589A, #5e138d);
    background-origin: border-box;
    background-clip: padding-box, border-box; /* 让白色背景覆盖padding+内容区 */
    cursor: pointer;
}

修复说明 #

• 统一初始input的边框宽度为2px：和hover状态下的边框宽度保持一致，避免鼠标悬停时元素出现不必要的位移。
• 修改background-clip为padding-box, border-box：白色背景会覆盖padding区域和内容区域，左侧padding不再露出渐变边框的底层，所有边框的视觉效果就完全一致了。

内容的提问来源于stack exchange，提问作者Arlind Kamberi