focus - CSS过渡不适用于box-shadow属性

Question

我有一个输入文本字段，当用户关注它时，我希望框阴影属性从一种样式过渡到另一种样式。我的两个CSS声明有什么问题导致转换没有发生？

input[type="text"], textarea { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3) inset; transition: box-shadow 0.33s ease-in-out; }
input[type="text"]:focus, textarea:focus { box-shadow: 0 0 7px 0 rgba(30, 144, 255, 1); }

Answer 1

看来您无法从插入的框阴影过渡到普通的框阴影，反之亦然。这是一个很好的答案CSS box-shadow transition。并应用于您的代码：

input[type="text"], textarea { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3) inset, 0px 0px 0px white; transition: box-shadow 0.33s ease-in-out; }
input[type="text"]:focus, textarea:focus { box-shadow: 0px 0px 0px white inset, 0 0 7px 0 rgba(30, 144, 255, 1); }

我在Chrome中进行了测试，它可以完美运行。

编辑：

为了进一步说明，基本上，您将为：focus类的插入框阴影创建一个空/空白样式（0px 0px 0px白色），为not：focus类创建一个空的外部框阴影样式。这样，嵌入式阴影从样式过渡到非样式，外部阴影从非样式过渡到样式。希望这可以澄清一点。