CSS转换不适用于box-shadow属性

Question

我有一个输入文本字段，我希望当用户关注它时，box-shadow属性从一种样式转换为另一种样式。我的两个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类的inset box-shadow创建一个空/空白样式（0px 0px 0px white），为not：focus类创建一个空的外框阴影样式。这样，插入阴影从样式转换为非样式，外部阴影从非样式转换为样式。希望这有点澄清。