Firefox中的CSS3多框阴影过渡不起作用答案

【问题标题】：CSS3 multiple box-shadow transition in Firefox not workingFirefox中的CSS3多框阴影过渡不起作用
【发布时间】：2012-08-20 22:04:38
【问题描述】：

这种转换适用于 Safari 和 Chrome（= 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

【问题讨论】：

标签： css transition

【解决方案1】：

首先，您需要写a.lorem:hover 而不是a:hover.lorem

之后，border-shadow 多值需要对应于它们的 ":hover" 对。 “inset”border-shadow 不能转换为“outset”border-shadow。

示例：

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);
}

【讨论】：