叶子工作室-logo 叶子工作室-banner
设为首页 | 加入收藏 | 联系我们 | 付款方式
 
本站首页 域名注册 虚拟主机 网站建设 网站案例 网页特效 Flash设计 网页教程 技术文档 来宾留言 油画商城 包包商城
 
[网页特效]44、flash幻灯片图片新闻管理系统(2008-8-15)
[商城]包包商城开通,希艾妮时尚女包。(2008-7-30)
[商城]油画肖像定制,100%纯手工绘制。(2008-4-24)
[公告]即时起,域名、主机价格均有不同程度的涨价。(2007-10-15)
[资源下载]新增扩展名批量修改软件。(2007-9-7)
[网页特效]41、用代码实现网页背景渐变效果。(2007-5-17)
 

用代码实现给图片添加投影效果。
QQ在线状态显示。
滚动字幕的制作方法。
图片交替渐变特效。
透明Flash的应用。
用iframe嵌套调用网页。
设置网页字体为9号字。
“设为首页”如何添加?
多种不同超链接的应用。
网页竖线的多种制作方法。
CSS设置段落文字行高。
第一章 建立网站
第二章 做网站之前的构思
第三章 DW表格的应用
第四章 深入了解DW表格
第五章 网页超链接
第六章 Photoshop的应用
     更多...
当前位置:首页 > 网页特效 >用代码实现给图片添加投影效果

 

解说:给图片添加投影效果再也不需要用Photoshop先做好投影效果图,只要添加代码就可以轻松实现。
(图一)的效果在<style>和</style>之间添加代码:
.pic{
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5) ;
}
然后在添加的图片属性中设置class="pic"
这样子就可以实现图片添加投影的效果,默认投影颜色是灰色,所以我们设置color=#333333,如果要换其它颜色,就改变这个值,strength=5是设置了投影的大小。

(图一)跟(图一)不同的地方是设置了一个白色边框,在<style>和</style>之间添加代码:
.pic1{
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5) ;
border : 3px #FFFFFF solid ;
}
然后在添加的图片属性中设置class="pic1"
border中的3px就设置了白框为3px,可以自己调整宽度。

(图三)是改了颜色和边框的厚度,代码换成:
.pic2{
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5) ;
border : 1px #ff0000 solid ;
}

Copyright © 2003 leafbbs.com All Rights Reserved.
QQ:83720594 E-mail:zxy_9280@163.com
叶子工作室版权所有 备案号:闽ICP备05006422号