-webkit-box-反映在Firefox和IE - CSS

我還是新來的思考在CSS等，所以有這個問題。對於主頁，我被告知我需要反映文本，然後是圖像（以及背後的複雜陰影，但這是我的待辦事項列表）。-webkit-box-反映在Firefox和IE - CSS

對於鉻/狩獵（WebKit的）我有

-webkit-箱反映：下面0像素-webkit梯度（線性，左上，左下，從（透明），顏色停止（70％，透明），至（rgba（255,255,255,0.2）））;

看起來很不錯...但是...顯然它只適用於鉻/ safari。如何在IE瀏覽器（如果可能的話，7/8/9）和Firefox中獲得相同的效果？

感謝，尼古拉斯·卡特

來源

2012-09-22 Nicholas-c

也許你可以提供一個jQuery回退與this plugin。

本教程還介紹cross-browser reflection。

要將不支持反射的瀏覽器作爲目標，您可以使用Modernizr。

此構建：http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes將爲您的頁面添加no-cssreflections類<html>標記。

然後，您可以添加特定的CSS規則：

.no-cssreflections #element-id { 
    /* custom CSS rule */ 
}

或通過JavaScript：

if(!Modernizr.cssreflections){ 
    /* run plugin or whatever */ 
}

來源

2012-09-22 16:31:30 Giona

您應該使用火狐-moz-element屬性..

對於反射它會成爲：

#reflection { 
    /* It's a copy of the original element... */ 
    background: -moz-element(#reflected-element) 
       bottom left no-repeat; 

    /* ... turned upside down ... */ 
    -moz-transform: scaleY(-1); 

    /* ... with a gradual fade-out effect towards the bottom. */ 
    mask: url(#reflection-mask); 
}

What is -moz-element?

Reference

來源

2012-09-22 16:34:21

-webkit-box-反映在Firefox和IE - CSS

回答

相關問題