您好!欢迎您光临23种CSS图片修饰效果演示与代码_云杜红叶!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教程 >>>网页、HTML教程>>>23种CSS图片修饰效果演示与代码
23种CSS图片修饰效果演示与代码
发表日期:2007-5-20 15:56:00 出处:网络 作者:未知 发布人:ydhy 已被访问 3740

1 单线框


 




<center><img src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="border:3 solid #ff0000"><br><br><br></center>
 
2。双线框
 
 


<center><img src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="border:5 double green"><br><br><br></center>
 
3。凸出框
 

 



<center><img src="
 
4。凹进框
 
 

<center> <img src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="border:25 inset #ff88ff"><br> </center>
 
 5。邮票框
 
 
<center> <table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"><tr><td bgcolor="#aeffae" width=600 height=450 align=center valign=middle><img src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg"></td></tr></table></center>


<CENTER><IMG style="BORDER-RIGHT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-BOTTOM: #ff0000 4px dashed" src="



http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg"><BR><BR><BR></CENTER
>
7。凹槽框
 
 


<center> <img src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="border:25 groove green" border="0"><br><br><br></center>
 
8。脊状框
 

 


<center> <img src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="border:25 ridge green" border="0"><br><br><br></center>
 
9。立体阴影框
 

 

<center><table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"><tr><td bgcolor="#ffffff" align=center valign=middle><img src="

http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg"></td></tr></table></center>

 

代码转换如下:
 

<CENTER> <TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=400 cellSpacing=3 cellPadding=15 width=400 border=2> <TBODY> <TR> <TD vAlign=center align=middle bgColor=#ffffff><IMG src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg"></TD></TR></TBODY></TABLE></CENTER>
<center><img src="
http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:shadow(color=#32cd32)"></center>
 
11。横向渐变透明
 
 
<center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)">
 
12。圆形渐变透明
 
 
<center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></center>
 
13。X形渐变透明
 
 <center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></center>
 
14。改变某种颜色
 
 <center><img src="
 
15。黑白效果
 
 <center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:''gray''"></center>
 
16。X光效果(底片)
 
 
<center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:''xray''"></center>
 
17。浮雕效果
 <center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></center>
 
18。上下颠倒
 
 <center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:flipv"><center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:fliph"></center>
 
20。色彩颠倒
 
 
<center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:invert"></center>
 
21。粒状阴影
 
 <center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"></center>
 
22。模糊效果
 
 
<center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"></center>
 
23。水波效果(风吹)
 
 
<center><img src="http://photo1.hexun.com/p/2006/0322/13563/b_79E98D7DDFEF46FB.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>
 
粗浅的介绍这么多,想给初学的朋友们一点小小的帮助,自己看里面的数值代码的变化吧~~~
 
 
月光草原整理
双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



ydhy
(2006-11-27 11:40:00)

如风网友你好!非常欢迎你能来小站作客并留言.


如风
(2006-11-26 9:50:00) [222.84.129.]

太漂亮了.

 发表评论:共有 2 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

云杜红叶 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ383170807 联系人:红叶

琼icp备09005167