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

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

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

---

但是，如何仅对其中一个应用转换？

为此，您必须明确列出所有的

框阴影，包括未更改的阴影，并为所有阴影设置动画（尽管其中一些/大部分没有更改）。不改变任何内容的动画至少看起来是无动画的。不考虑幕后的过渡

指示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;
}

---

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

box shadow

s.

太棒了！谢谢非常快速且有帮助的回答：]我真的想不出一个场景，在这个场景中，您希望使用超过2个框阴影（插图和开头），所以我不认为这是一个问题。