CSS 边框过渡

Question

我想创建一个输入框并为其设置边框样式。
为此，我需要执行 input:focus，然后我就完成了，但我不知道如何继续。

如果我想更改背景的过渡效果，那么我会执行 transition: background Xs; 或 -webkit-transition: background Xs;。

我进行了搜索，但没有找到任何可以帮助我的东西。

谢谢。

Answer 1

您当前的过渡仅适用于元素的背景，不适用于边框。将“背景”更改为“边框”，完全删除“背景”或在背景旁边添加“边框”:

input {
    border: 1px solid #bbb;
    transition: background 0.2s, border 0.2s;
}

input:focus {
    border-color: tomato;
}