CSS渐变之CSS3 gradient在Firefox3.6下的效果兼容使用
程序员文章站
2024-02-18 19:17:54
...
这是最近在公司做一个产品的官网遇到的。
这是谷歌显示效果。
这是兼容之后火狐的效果。
贴上代码:
<ul class="wifi-device"> <li><img id="wifi-watch" src="img/mkl_watch.png" alt=""></li> <li><img id="wifi-iphone" src="img/mkl_iphone.png" alt=""></li> <li><img id="wifi-ipad" src="img/mkl_ipad.png" alt=""></li> <li><img id="wifi-mac" src="img/mkl_mac.png" alt=""></li> <li></li> </ul>
.wifi-device{
display: flex;
align-items:flex-end;
justify-content: space-around;
position: relative;
}
.wifi-device li{
padding-top: 110px;
}
.wifi-device li img{
-webkit-box-reflect: below 5px -webkit-linear-gradient(transparent,transparent 60%,rgba(0,0,0,.2));
}
.wifi-device li:nth-child(4) img{
-webkit-box-reflect: below -27px -webkit-linear-gradient(transparent,transparent 60%,rgba(0,0,0,.2));
}
/*兼容火狐倒影*/
.wifi-device li:after{
position: absolute;
opacity: 0.4;
content: "";
display: block;
width: 100%;
-moz-transform: scaleY(-1);
}
.wifi-device li:nth-child(1):after {
background: -moz-element(#wifi-watch) no-repeat;
height: 165px;
}
.wifi-device li:nth-child(2):after {
background: -moz-element(#wifi-iphone) no-repeat;
height: 325px;
}
.wifi-device li:nth-child(3):after {
background: -moz-element(#wifi-ipad) no-repeat;
height: 440px;
}
.wifi-device li:nth-child(4):after {
background: -moz-element(#wifi-mac) no-repeat;
height: 610px;
}
.wifi-device li:nth-child(5){
position: absolute;
height: 200px;
width: 100%;
top: 100%;
padding: 0;
background: -moz-linear-gradient(rgba(0,0,0,0),1%,rgba(0,0,0,1))
}