使用CSS給圖片添加陰影的方法
發(fā)布時間：2009-07-11 19:08:50 作者：佚名 
我要評論
我要評論一般我們可以使用背景圖的方式給圖片添加陰影，但對于不固定尺寸的圖片如何實現(xiàn)呢？我們可以采取“視覺欺騙大法”——定義漸變邊框來實現(xiàn)：
[code]
提示：您可以先修改部分代碼再運行
下面這段定義是各標(biāo)準(zhǔn)瀏覽器中圓角定義，用以更專業(yè)地欺騙眼睛
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
顏色代碼可以在ps中做好外發(fā)光效果后拾取。我上面的效果是[柔和]、[擴展0]、[大小5px]、[顏色#000]其余默認
當(dāng)然了，特殊要求的話可以使用ie的濾鏡來實現(xiàn)更華麗的陰影。
一般我們可以使用背景圖的方式給圖片添加陰影，但對于不固定尺寸的圖片如何實現(xiàn)呢？我們可以采取“視覺欺騙大法”——定義漸變邊框來實現(xiàn)：
提示：您可以先修改部分代碼再運行
下面這段定義是各標(biāo)準(zhǔn)瀏覽器中圓角定義，用以更專業(yè)地欺騙眼睛
復(fù)制代碼
代碼如下:border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
顏色代碼可以在ps中做好外發(fā)光效果后拾取。我上面的效果是[柔和]、[擴展0]、[大小5px]、[顏色#000]其余默認
當(dāng)然了，特殊要求的話可以使用ie的濾鏡來實現(xiàn)更華麗的陰影。
相關(guān)文章
- 在ie下模擬css3中的box-shadow（陰影）可以使用ie的Shadow（陰影）濾鏡來實現(xiàn)，需要注意的是該濾鏡必須配合background屬性一起使用，否則該濾鏡失效2013-09-11
- CSS控制背景圖像平鋪，從而實現(xiàn)區(qū)域邊框陰影的效果，可貴之處是本代碼不管你需要陰影的區(qū)域是多大，它都能自動適應(yīng)，個人感覺還不錯，具體實現(xiàn)如下建議收藏下哦2013-08-25
- 想做個頁面用到css3的圓角和陰影效果，但ie瀏覽器不支持，之前也聽說有插件可以實現(xiàn)，周六在網(wǎng)上找到了一個方法，原文如下： 但凡是前端工程師，都知道IE6，IE7，IE8不支2013-07-02
css實現(xiàn)跨瀏覽器的box-shadow盒陰影效果告別圖片實現(xiàn)類似效果(2)
前面的文章雖然實現(xiàn)IE下的盒陰影效果也是使用的濾鏡，但是使用的是shadow濾鏡，這種濾鏡的效果很牽強，效果過渡不自然.而本文實現(xiàn)的IE下的盒陰影效果就相對非常自然，而且2013-01-08css實現(xiàn)跨瀏覽器的盒陰影效果告別圖片實現(xiàn)類似效果
在web頁面的UI表現(xiàn)中，投影效果可以說是非常常見的一種表現(xiàn)效果了,然而，在CSS2的時代，我們多半使用圖片實現(xiàn)類似效果，或是使用CSS其他屬性模擬陰影效果，但是，現(xiàn)在，CSS2013-01-08css div 邊框陰影利用背景圖或內(nèi)外層div實現(xiàn)層次感覺陰影效果
在網(wǎng)頁布局中偶爾會用到div 邊框陰影做一些特殊效果本文介紹兩種實現(xiàn)方法:一種是利用內(nèi)外層的div邊框來實例層次感覺的css邊框陰影效果，另一種是利用了背景圖片再加內(nèi)外div2012-12-18- 你在使用box-shadow來實現(xiàn)陰影效果的時候，有沒有注意到有些情況下，陰影并不是透明的效果2011-08-28
- 通過這個小例子你是否覺得CSS處理文字效果方面功能比較強大呢？確實是這樣的，用CSS可以給文字加陰影、加背景，讓文字變色炫彩、變成3維的，這并不難，好好研究一下這幾個2009-10-23
div實現(xiàn)陰影邊框效果(適應(yīng)各主流瀏覽器)
陰影效果在以前或許會采用圖片來實現(xiàn)，而如今使用css便可實現(xiàn)，本文有個不錯的示例，喜歡的朋友可以參考下2013-09-16