NewsRhzhi | 先创资讯 | 旧版入口
rhzhi.net
网站首页 | NewsRhzhi | 先创资讯 | 操作系统 | 工具软件 | 办公软件 | 网站设计 | 组网专栏 | 平面设计 | 多 媒 体 | 程序开发 | 硬件资料 | 聊天软件
您现在的位置: 先创网 >> 网站设计 >> FrontPage >> 文章正文
实现页面图片阴影特效技巧三则
赛迪网
2004-10-28 0:55:00文/touch8
    

    给图片加上阴影效果可以使图片更具有立体感,下面介绍三种制作方法:

第一种 利用图象编辑软件

最常用的图象编辑软件是Photoshop,制作过程如下:

1、选取一张图片;

2、打开Photoshop,为该图片建立一背景复本图层;

3、对该图层进行描边和阴影设置;

4、调整画布大小;

5、将图片保持为jpg文件。见下图:

第二种 利用表格制作

请参看下列代码:

< 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>

做好后的截图效果如下:

第三种 利用层制作

参看下列代码:

< 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>

做好后的截图效果如下:

打印此页 投稿与建议 返回顶部
栏 目 索 引
软件应用 SOFTWARE
Win XP | NT/2003
Win2000 | DOS/Win9x
PowerPoint | Office
Excel | Word
网络软件 | 实用软件
媒体软件 | 系统软件
常用软件 | 办公软件
聊天软件 | 网络安全
新软试用 | Vista
设计在线 DESIGN
Dreamweaver | 3DMax
Photoshop | Flash
平面设计 | 网页设计
多 媒 体 | 精品画廊
精彩专区 SPECIAL
Q Q 专区 | 热门专题
组网玩网 | 程序开发
应用集锦 |

没有任何图片文章
相关文章
关于我们 - 联系方式 - 合作伙伴 - 网站大事记 - 网站地图 - 我要投稿
Copyright ©1997-2008 先创网 All Rights Reserved.
先创科技 版权所有