CSS3多的box-shadow過渡不工作

Question

這種轉變工作在Safari &鉻（= WebKit瀏覽器），但不能在Firefox（Mozilla的=）。爲什麼？

a.lorem { 
    width: 100px; 
    padding: 20px; 
    display: block; 
    color: white; 
    text-align: center; 
    background: rgb(191,210,85); 
    background: -moz-linear-gradient(top, rgb(191,210,85) 0%, rgb(142,185,42) 50%, rgb(114,170,0) 51%, rgb(158,203,45) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,210,85)), color-stop(50%,rgb(142,185,42)), color-stop(51%,rgb(114,170,0)), color-stop(100%,rgb(158,203,45))); 
    background: -webkit-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%); 
    background: -o-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%); 
    background: -ms-linear-gradient(top, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%); 
    background: linear-gradient(to bottom, rgb(191,210,85) 0%,rgb(142,185,42) 50%,rgb(114,170,0) 51%,rgb(158,203,45) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0); 
    box-shadow: inset 0 -3px 0 #A9A9A9, 
       0 3px 0 #EFEFED; 
    -webkit-transition: box-shadow .5s linear; 
    -moz-transition: box-shadow .5s linear; 
    -o-transition: box-shadow .5s linear; 
    -ms-transition: box-shadow .5s linear; 
    transition: box-shadow .5s linear; 
} 

a:hover.lorem { 
    box-shadow: 0 3px 0 rgba(0, 0, 0, .1), 
       inset 0 -3px 0 rgba(0, 0, 0, .1), 
       inset 0 0 100px rgba(255, 255,255 , .3); 
} 

Fiddle

Answer 1

首先，你需要寫a.lorem:hover而不是a:hover.lorem

後，邊框陰影多值需要對應於它們的 「：懸停」 對。 「插入」邊界陰影不能過渡到「開始」邊界陰影。

爲例：

a.lorem{ 
    box-shadow: 
     inset 0 -3px 0 #A9A9A9, 
      0 3px 0 #EFEFED, 
     inset 0 0 0 rgba(0,0,0,0); /* for third ":hover" value */ 
    transition:box-shadow .5s linear; /* add prefixed verison (-moz-, -webkit-, ...*/ 
} 
a.lorem:hover{ 
    box-shadow: 
     inset 0 -3px 0  rgba(0, 0, 0, .1), 
      0 3px 0  rgba(0, 0, 0, .1), 
     inset 0 0 100px rgba(255, 255,255 , .3); 
}