CSS过渡效果在box-shadow属性上无法生效

Question

CSS过渡效果在box-shadow属性上无法生效

3

我有一个输入文本字段，当用户聚焦在它上面时，我希望 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); }

- GTS Joe

当你聚焦和失焦时，是否会发生任何事情？ - Kenny Worden

不，转换过程中根本没有任何反应。当然，阴影效果会改变，但是它会立即改变，没有任何过渡效果。 - GTS Joe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- deebs · Accepted Answer

似乎无法将插图的盒子阴影转换为普通的盒子阴影，反之亦然。这里有一个很棒的答案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中进行了测试，它完美地运行。

编辑：

进一步解释，基本上您正在创建一个空的/空白样式（0px 0px 0px white），用于:focus类的内阴影和非:focus类的外部阴影。这样，内部阴影从有样式到无样式的转换，外部阴影从无样式到有样式的转换。希望这能更清楚一些。