实现页面图片阴影特效

实现页面图片阴影特效给图片加上暗影功效不妨使图片更具备立体感，底下引见三种创造本领：第一种 运用图象编纂软硬件最常用的图象编纂软硬件是photoshop,创造进程如次：1、采用一张图片；2、翻开photoshop,为该图片创造一后台复本图层；3、对该图层举行描边和暗影树立；4、安排画布巨细；5、将图片维持为jpg文献。见下图：第二种 运用表格创造请参看下列代码：< html >< head >< title >表格图片暗影< /title >< meta http-equiv="content-type" content="text/html; charset=utf8" >< /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="http://www.okasp.com/techinfo/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 >做好后的功效如次： 第三种 运用层创造参看下列代码：< html >< head >< title >层图片暗影< /title >< meta http-equiv="content-type" content="text/html; charset=utf8" >< /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="http://www.okasp.com/techinfo/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 > 做好后的功效如次：