Firefox中的CSS3多框阴影转换不工作
这种转换适用于Safari和Chrome(=Webkit浏览器),但不适用于Firefox(=Mozilla)。为什么?Firefox中的CSS3多框阴影转换不工作,css,transition,Css,Transition,这种转换适用于Safari和Chrome(=Webkit浏览器),但不适用于Firefox(=Mozilla)。为什么? 首先,您需要编写a.lorem:hover而不是a:hover.lorem 之后,border shadow multi值需要与其“:hover”对相对应。 “插入”边界阴影不能过渡到“开始”边界阴影 例如: a.lorem{ 框阴影: 插图0-3px 0#A9A9, 0 3px 0#efed, 插入0 rgba(0,0,0,0);/*表示第三个:悬停值*/ 转换:bo
首先,您需要编写
a.lorem:hover
而不是a:hover.lorem
之后,border shadow multi值需要与其“:hover”对相对应。
“插入”边界阴影不能过渡到“开始”边界阴影
例如:
a.lorem{
框阴影:
插图0-3px 0#A9A9,
0 3px 0#efed,
插入0 rgba(0,0,0,0);/*表示第三个:悬停值*/
转换:box shadow.5s线性;/*添加前缀verison(-moz-,-webkit-*/
}
a、 洛勒姆:悬停{
框阴影:
插图0-3px0 rgba(0,0,0,1),
0 3px 0 rgba(0,0,0,1),
插入0 0 100px rgba(255,255255,.3);
}
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);
}