css - 如何向一个元素添加多个盒子阴影，但只对其中一个应用过渡？

Question

我知道可以使用以下方法向元素添加多个框阴影：

box-shadow: inset 1px 1px 3px #000000, 1px 1px 3px #FF0000;

但是我如何只对其中一个应用过渡？

Answer 1

为此，您必须明确列出所有box-shadows，包括未更改的阴影，并对它们进行动画处理（尽管其中一些/大部分没有变化）。一个什么都不改变的动画至少看起来是没有动画的。不管幕后transition。

演示 CSS：

div {
    box-shadow: inset 1px 1px 3px #000000, 1px 1px 3px #FF0000;
    transition: box-shadow 1s linear;
}

div:hover {
    box-shadow: inset 1px 1px 3px #000000, 1px 1px 10px #FF0000;
    transition: box-shadow 1s linear;
}

（简单）JS Fiddle 演示。

不幸的是，到目前为止（据我所知，也没有计划），没有方法来命名或识别个人box-shadows。