CSS边界过渡

Question

我想创建一个输入框并用边框设置样式 要做到这一点，我需要input:focus，然后我做了，我不知道如何继续前进。

如果我想更改背景的转换，请执行transition: background Xs;或-webkit-transition: background Xs;。

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

感谢。

Answer 1

您当前的转场仅适用于元素的background，不是 border。将“背景”更改为“边框”，完全删除“背景”或在背景旁添加“边框”：

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

input:focus {
    border-color: tomato;
}

Answer 2

input:focus {
    border: 5px solid red;
    background: blue;
}
input {
    transition: border 1s, background 2s;
}

删除不需要的内容，边框或背景;）您必须在元素本身中指定过渡，并在：focus中指定所需的效果。