網(wǎng)站設(shè)計中有很多頁面設(shè)計的特效可以為網(wǎng)站增色不少，不僅是網(wǎng)站設(shè)計的一個特色，也是吸引用戶的一個亮點，所以我們在網(wǎng)上設(shè)計時經(jīng)常會通過代碼技術(shù)實現(xiàn)一些特效。
交互設(shè)計技巧、網(wǎng)頁設(shè)計圖片格式、網(wǎng)站字體設(shè)計、網(wǎng)頁設(shè)計布局等都可以加入一些適當(dāng)?shù)男√匦碓鰪娋W(wǎng)站頁面的趣味性。給圖片加上陰影效果可以使圖片更具有立體感，接下來創(chuàng)新互聯(lián)要為大家介紹的是實現(xiàn)頁面圖片陰影特效的設(shè)置步驟，希望可以給網(wǎng)站設(shè)計師提供一些幫助。
網(wǎng)頁設(shè)計中帶陰影圖片效果的三個實例
實例一，如果你選擇利用層制作，可參看下列代碼：
< html >
< head >
< title >層圖片陰影< /title >
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
< /head >
< body bgcolor="#FFFFFF" text="#000000" >
< div id="Layer1" style="position:absolute;left:0px; top:0px; width:246px; height:186px; z-index:1" >
< img src="sample.jpg" width="240" height="180" style="border:white 3 solid" >
< div id="Layer2" style="position:relative; left:10px; top:-180px; width:260px; height:200px; z-index:-1; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=85, FinishX=0, FinishY=100) Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=90, StartY=0, FinishX=100, FinishY=0) Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=10, StartY=0, FinishX=0, FinishY=0) Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=10, FinishX=0, FinishY=0)" >< /div >
< /div >
< /body >
< /html >
實例二，如果你利用表格制作，請參看下列代碼：
< html >
< head >
< title >表格圖片陰影< /title >
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
< /head >
< body bgcolor="#FFFFFF" text="#000000" >
< table width="263" border="0" cellspacing="0" cellpadding="0" height="203" >
< tr >
< td valign="top" width="243" height="183" colspan="2" rowspan="2" >< img src="sample.jpg" width="240" height="180" >< /td >
< td width="20" height="20" >< /td >
< /tr >
< tr >
< td width="20" height="163" bgcolor="#000000" style="filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0) Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=10, FinishX=0, FinishY=0)" >< /td >
< /tr >
< tr >
< td width="20" height="20" >< /td >
< td width="223" height="20" bgcolor="#000000" style="filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100) Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=10, StartY=0, FinishX=0, FinishY=0)" >< /td >
< td width="20" height="20" bgcolor="#000000" style="filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100) Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0)" >< /td >
< /tr >
< /table >
< /body >
< /html >
實例三，如果利用圖象編輯軟件，請參考以下說明：
用Photoshop,制作過程如下：
1、選取一張圖片；
2、打開Photoshop,為該圖片建立一背景復(fù)本圖層；3、對該圖層進行描邊和陰影設(shè)置；4、調(diào)整畫布大??；
5、將圖片保持為jpg文件。
以上就是創(chuàng)新互聯(lián)為大家介紹的網(wǎng)頁設(shè)計中帶陰影圖片效果的三個實例，網(wǎng)站設(shè)計師在實際的設(shè)計工作中，可以參考以上三種方法，也可以在實踐中總結(jié)出更多適合自己的方式。如需幫助請及時聯(lián)系我們的在線客服人員，他們將隨時為您提供服務(wù)。

分享文章：網(wǎng)頁設(shè)計中帶陰影圖片效果的三個實例
本文URL：http://www.rwnh.cn/news21/122671.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)