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 类的插入框阴影创建一个空/空白样式（0px 0px 0px 白色），并为非 :focus 类创建一个空的外框阴影样式。这样，插入阴影从样式转换为非样式，外部阴影从非样式转换为样式。希望这能澄清一点。