如何向一個元素添加多個陰影框，但只對其中的一個應用轉換？

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 s。