应用填充时边框无法正常工作

Question

我正在为这个输入字段应用边框和渐变：

( https://i.stack.imgur.com/eTqQP.png )

，但是因为我现在应用了一些填充，当我输入 hover 时，它在边框的左侧非常厚

这是 css 代码：

#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: content-box,border-box;
    cursor: pointer;
}
input {
    padding-left: 5px;
    border-radius: 5px;
    border-color: rgba(237, 237, 237, 255);
}

我希望左侧看起来与其他边框相同。

如果有人帮助我，我将不胜感激！

Answer 1

在背景剪辑中使用padding-box而不是content-box

 input { border: 3px solid 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; cursor: pointer; padding: 5px 30px; font-size: 20px; outline-offset: 4px; }

 <input type="text" placeholder="some text">

Answer 2

这是你想要达到的目标吗？

 #input2 { padding-left: 5px; cursor: pointer; font-family: monospace; width: 200px; height: 30px; }.input-container { display: flex; border-radius: 5px; width: max-content; border-color: rgba(237, 237, 237, 255); padding: 2px; }.input-container:hover { border: none; background-image: linear-gradient(white, white), linear-gradient(45deg, #63589A, #5e138d); background-origin: border-box; background-clip: content-box,border-box; }

 <div class="input-container"> <input id="input2" type="text" placeholder="eg 1234 5678 9123 0000"/> </div>