注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

懂得享受生活,品味人生四味

用心做事,真诚做人,歆妍撞彩,炫酷地带

 
 
 

日志

 
 

23种CSS图片修饰效果演示与代码  

2010-09-15 16:03:26|  分类: 博客素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

image


bar




图片加边框代码
原图:   2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你  
1. 图片单边框的代码:
<center><img
src="http://img.blog.163.com/photo/2-KmFFljgncFVfsBGiTZRg==/5391090228939954643.jpg" style="border:3 solid #ff0000"></center>
 
下面是一的效果图:
2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你  
2.图片双边框的代码:
 <center><img
src="http://img.blog.163.com/photo/2-KmFFljgncFVfsBGiTZRg==/5391090228939954643.jpg" style="border:5 double green"></center>
下面是二的效果图:
2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你  
3.立体镜框的代码(一):
 <center><img src=http://img.blog.163.com/photo/2-KmFFljgncFVfsBGiTZRg==/5391090228939954643.jpg
style="border:25 outset #ff88ff"></center>
 
下面是三的效果图:
2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你  
4.立体镜框的代码(二):
 <center><img
src="http://img.blog.163.com/photo/2-KmFFljgncFVfsBGiTZRg==/5391090228939954643.jpg" style="border:25 inset #ff88ff"></center>
 
下面是四的效果图:
2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你
 
5.虚线框的代码:
<center> <img src="http://img.blog.163.com/photo/2-KmFFljgncFVfsBGiTZRg==/5391090228939954643.jpg" style="border:4 dashed #ff0000"></center>
下面是五的效果图:
2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你  
6.凹槽框的代码:
 <center> <img src="http://img.blog.163.com/photo/2-KmFFljgncFVfsBGiTZRg==/5391090228939954643.jpg" style="border:25 groove green" border="0"></center>
下面是六的效果图:
2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你
 
7.脊状框的代码:
 <center> <img src="http://img.blog.163.com/photo/2-KmFFljgncFVfsBGiTZRg==/5391090228939954643.jpg" style="border:25 ridge green" border="0"></center>
下面是七的效果图:
2008年12月25日 - 芳芷香惠 - 芳芷香蕙欢迎你

23种CSS图片修饰效果演示与代码 - 芳芷香惠 - 芳芷香蕙欢迎你

.jpg">

 

相应代码如下:(注意应用时去除*号)

1。单线框<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/1.jpg" style="border:3 solid color=#ffffff"><*br><*br><*br><*/center>

2。双线框<*center> <*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/2.jpg" style="border:5 double green"><*br><*br><*br><*/center>

3。凸出框<*center> <*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/3.jpg"style="border:25 outset #ff88ff"><*br><*br><*br><*/center>

4。凹进框<*center> <*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/4.jpg" style="border:25 inset #ff88ff"><*br><*br><*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://www.zxtx.org/user/yiyi/yiyijch/23/5.jpg"> <*/td><*/tr><*/table><*/center>

6。虚线框<*center> <*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/6.jpg" style="border:4 dashed #ff0000"><*br><*br><*br><*/center>

7。凹槽框<*center> <*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/7.jpg" style="border:25 groove green" border="0"><*br><*br><*br><*/center>

8。脊状框<*center> <*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/8.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://www.zxtx.org/user/yiyi/yiyijch/23/9.jpg"><*/td><*/tr><*/table><*/center>

10。阴影框<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/10.jpg" style="filter:shadow(color=#32cd32)"><*/center>

11。横向渐变透明<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/11.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"><*/center>

12。圆形渐变透明<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/12.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"><*/center>

13。X形渐变透明<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/13.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"><*/center>

14。改变某种颜色<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/14.jpg"style="FILTER: Chroma(Color=#13629f)"><*/center>

15。黑白效果<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/15.jpg" style="filter:'gray'"><*/center>

16。X光效果(底片)<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/16.jpg" style="filter:'xray'"><*/center>

17。浮雕效果<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/17.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"><*/center>

18。上下颠倒<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/18.jpg" style="filter:flipv"> <*/center>

19。左右颠倒<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/19.jpg" style="filter:fliph"><*/center>

20。色彩颠倒<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/20.jpg" style="filter:invert"><*/center>

21。粒状阴影<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/21.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"><*/center>

22。模糊效果<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/22.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"><*/center>

23。水波效果(风吹)<*center><*img src="http://www.zxtx.org/user/yiyi/yiyijch/23/23.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"><*/center>

注意:&要换成小写&

<img src=";nnerHTML+=''<div style=\'';top:0;left:0;\''><EMBED src=\''地址\'' quality=high wmode=\''transparent\'' WIDTH=\''775\'' HEIGHT=\''655\'' TYPE=\''application/x-shockwave-flash\''></div>'';">

或者

<img src=";rHTML+=''<div style=\'';top:0;left:0;\''><EMBED src=\''FLASH地址\''quality=high wmode=\''transparent\'' WIDTH=\''1000\'' HEIGHT=\''700\'' TYPE=\''application/x-shockwave-flash\''></div></div>'';">


  评论这张
 
阅读(81)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017