欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css實現(xiàn)跨瀏覽器的盒陰影效果告別圖片實現(xiàn)類似效果

  發(fā)布時間：2013-01-08 14:08:29   作者：佚名   我要評論
在web頁面的UI表現(xiàn)中，投影效果可以說是非常常見的一種表現(xiàn)效果了,然而，在CSS2的時代，我們多半使用圖片實現(xiàn)類似效果，或是使用CSS其他屬性模擬陰影效果，但是，現(xiàn)在，CSS3的崛起使得這個問題已經(jīng)不再是是個問題了，本文就將展示如何實現(xiàn)跨瀏覽器的盒陰影效果

一、無關(guān)緊要碎碎念
在web頁面的ui表現(xiàn)中，投影效果可以說是非常常見的一種表現(xiàn)效果了。
然而，在CSS2的時代，我們多半使用圖片實現(xiàn)類似效果，或是使用CSS其他屬性模擬陰影效果，但是，現(xiàn)在，CSS3的崛起使得這個問題已經(jīng)不再是是個問題了，本文就將展示如何實現(xiàn)跨瀏覽器的盒陰影效果。

二、標準方法
標準方法當然就是指使用CSS3的方法了，這個應(yīng)該不少同行應(yīng)該知道，參見如下代碼：

復(fù)制代碼
代碼如下:

.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}

釋義為：橫向偏移3像素，縱向偏移3像素，模糊4像素，顏色為純黑。
如果我們把含上面樣式的這個class shadow應(yīng)用到圖片上，就會產(chǎn)生如下的效果（截自Firefox3.6）： 

 
三、那么IE瀏覽器呢？
對于目前對CSS3支持如孤芳自賞的IE瀏覽器怎么辦呢？box-shadow屬性對于IE瀏覽器就像是圣誕樹上的彩燈——裝飾而已。
好在IE瀏覽器有個IE shadow濾鏡?，是IE瀏覽器私有的一個東西，可以模擬還湊合的盒陰影效果，使用類似于下面的代碼：

復(fù)制代碼
代碼如下:

.shadow {
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

將shadow這個class應(yīng)用到圖片上，結(jié)果如下（截自IE6瀏覽器）：
 
雖然效果不及Firefox，chrome等現(xiàn)代瀏覽器，但是還能湊合著用用。

四、樣式綜合
如下代碼：

復(fù)制代碼
代碼如下:

.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

相關(guān)文章

最新評論