-webkit-box-reflect -FlexFox的CSS

我想要做這樣的事情http://designshack.net/tutorialexamples/HoverEffects/Ex5.html，其中圖像的反射顯示下，但它不適用於IE或FireFox。這裏是我的代碼，我有http://jsfiddle.net/srvcm/1/有沒有什麼竅門讓Firefox做到這一點？-webkit-box-reflect -FlexFox的CSS

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

預先感謝您

來源

2012-11-06 benji_r

你甚至嘗試使用Google CSS3反射？ https://developer.mozilla.org/en-US/demos/detail/css3-reflection-effect –

有，我有，很多人說，它沒有對火狐 –

對不起的工作，我已經取消了我的downvote（這是一個不必要）。上面的鏈接應該會告訴你如何實現跨瀏覽器的效果（儘管它不使用「box-reflect」） –

http://caniuse.com/#search=box-ref < - 跨瀏覽器兼容的似乎缺少該屬性

來源

2012-11-06 07:39:33 ModS

雅，謝謝Mods爲您的鏈接。你認爲，這種效果就像JavaScript一樣嗎？你知道他們怎麼稱呼它 –

它有點激烈，但如果你絕對要在你的代碼完全改變，因爲你要保留類似的效果，這將工作（注意，你必須有照片的翻轉版本或使用某種形式的財產等翻轉底部圖片） http://jsfiddle.net/srvcm/9/ – ModS

追求這種方法，你還需要一個條件語句，要麼規定「如果Chrome跳過這些」對於我添加的代碼，或者有2個CSS文件，並有一個條件註釋「if chrome use this css」Else Use this css。我沒有專家，所以繼續尋找可能是一種更容易實現的方式。 – ModS

-webkit-box-reflect -FlexFox的CSS

回答

相關問題