我正在尝试做这样的事情 http://designshack.net/tutorialexamples/HoverEffects/Ex5.html,其中图像的反射显示在 下,但是它不适用于 IE 或火狐。这是我的代码 http://jsfiddle.net/srvcm/1/有什么技巧可以让 Firefox 做到这一点吗?
.ex img {
<!--margin: 25px;-->
opacity: 0.9;
border: 1px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
.ex img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.7)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
提前致谢
最佳答案
http://caniuse.com/#search=box-ref <- 该属性似乎缺乏跨浏览器兼容性
关于html - -webkit-box-reflect - FireFox 的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13246409/