如何向元素添加多个框阴影，但仅对其中一个应用过渡？

Question

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

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

但是如何将过渡仅应用于其中一个？

Answer 1

为此，您必须明确列出所有 box-shadow s，包括未更改的阴影，并动画所有（尽管其中一些/大多数没有变化）。什么都不会改变的动画，至少看起来是非动画的。无论幕后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;
}

(simple) JS Fiddle demo

不幸的是，目前还没有（据我所知，也没有计划），没有方法来命名或识别单个box-shadow。