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盒子阴影过渡.并应用于您的代码:

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类创建一个空的外框阴影样式.这样,插入阴影从样式转换为非样式,外部阴影从非样式转换为样式.希望这有点澄清.