亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css實現跨瀏覽器的盒陰影效果告別圖片實現類似效果

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

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

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

復制代碼
代碼如下:

.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應用到圖片上，就會產生如下的效果（截自Firefox3.6）： 

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

復制代碼
代碼如下:

.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應用到圖片上，結果如下（截自IE6瀏覽器）：
 
雖然效果不及Firefox，chrome等現代瀏覽器，但是還能湊合著用用。

四、樣式綜合
如下代碼：

復制代碼
代碼如下:

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

相關文章

  • IE下模擬css3中的box-shadow(陰影)效果代碼

    在ie下模擬css3中的box-shadow（陰影）可以使用ie的Shadow（陰影）濾鏡來實現，需要注意的是該濾鏡必須配合background屬性一起使用，否則該濾鏡失效
    2013-09-11

  • CSS控制背景圖像平鋪實現邊框陰影效果

    CSS控制背景圖像平鋪，從而實現區(qū)域邊框陰影的效果，可貴之處是本代碼不管你需要陰影的區(qū)域是多大，它都能自動適應，個人感覺還不錯，具體實現如下建議收藏下哦
    2013-08-25

  • 讓IE6、IE7、IE8支持CSS3的圓角、陰影樣式

    想做個頁面用到css3的圓角和陰影效果，但ie瀏覽器不支持，之前也聽說有插件可以實現，周六在網上找到了一個方法，原文如下： 但凡是前端工程師，都知道IE6，IE7，IE8不支
    2013-07-02

  • css實現跨瀏覽器的box-shadow盒陰影效果告別圖片實現類似效果(2)

    前面的文章雖然實現IE下的盒陰影效果也是使用的濾鏡，但是使用的是shadow濾鏡，這種濾鏡的效果很牽強，效果過渡不自然.而本文實現的IE下的盒陰影效果就相對非常自然，而且
    2013-01-08

  • css div 邊框陰影利用背景圖或內外層div實現層次感覺陰影效果

    在網頁布局中偶爾會用到div 邊框陰影做一些特殊效果本文介紹兩種實現方法:一種是利用內外層的div邊框來實例層次感覺的css邊框陰影效果，另一種是利用了背景圖片再加內外div
    2012-12-18

  • css box-shadow陰影不透明的解決辦法

    你在使用box-shadow來實現陰影效果的時候，有沒有注意到有些情況下，陰影并不是透明的效果
    2011-08-28

  • CSS 文字加陰影變3D效果演示

    通過這個小例子你是否覺得CSS處理文字效果方面功能比較強大呢？確實是這樣的，用CSS可以給文字加陰影、加背景，讓文字變色炫彩、變成3維的，這并不難，好好研究一下這幾個
    2009-10-23

  • 使用CSS給圖片添加陰影的方法

    一般我們可以使用背景圖的方式給圖片添加陰影，但對于不固定尺寸的圖片如何實現呢？我們可以采取“視覺欺騙大法”——定義漸變邊框來實現： [code] 2009-07-11

  • div實現陰影邊框效果(適應各主流瀏覽器)

    陰影效果在以前或許會采用圖片來實現，而如今使用css便可實現，本文有個不錯的示例，喜歡的朋友可以參考下
    2013-09-16

最新評論