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

太师的博客

学无止境,快乐无限

 
 
 

日志

 
 

调用CSS语句修饰图片边框  

2012-11-20 13:08:55|  分类: 网海搜寻 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
欢迎您!启步学代码。

(游子学习笔记。 供初学HTML代码的朋友参考)


调用CSS语句修饰图片边框

  CSS样式表有非常强大的功能,调用CSS语句的各种滤镜属性和属值修饰图片边框,或编辑音画贴边框,可以得到精采的效果.先看两种贴图标签的不同效果.

  (1)HTML贴图标签代码如下:
<IMG src="http://img0.ph.126.net/_XSPRZoFC8sTLKZoH85byg==/6598252841167877050.jpg"
type=image width=350 style="border:16px #0000ff double">

显示结果:

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客



  (2)套用样式表语句的HTML贴图代码如下:

<IMG src="http://img0.ph.126.net/_XSPRZoFC8sTLKZoH85byg==/6598252841167877050.jpg"
type=image width=350 style="border:25px #2828FF double">

  ◆style=套用CSS标记.
  ◆border:25px #2828FF double 双线边框语句,宽25点,蓝色.

显示结果(图片有蓝色双线边框):

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客



  (1)粒状阴影边框实例代码:

<CENTER><div id="第1个滤镜" style="filter:Glow(strength=25,color=#FF0000);width:600;height:450"

align=center><br><img

src="http://img0.ph.126.net/_XSPRZoFC8sTLKZoH85byg==/6598252841167877050.jpg"

height="400" width="400" border="0"></div></CENTER>



显示结果:


调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客






   (2)邮票边框实例代码:

<TABLE style="BORDER-BOTTOM: #392d1d 3px dashed; BORDER-LEFT: #392d1d 3px dashed; WIDTH: 400px; BORDER-TOP: #392d1d 3px dashed; BORDER-RIGHT: #392d1d 3px dashed" cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=9 cellSpacing=2 borderColor=#392d1d cellPadding=40 width=400 bgColor=#c9a58b align=center height=400>
<TBODY>
<TR>
<TD background=http://img0.ph.126.net/_XSPRZoFC8sTLKZoH85byg==/6598252841167877050.jpg></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


显示结果:







 (3)图片圆形羽化实例代码:

<IMG style="FILTER: alpha(opacity=100,style=2)" src="http://img0.ph.126.net/iKgM750hL1eSGfoMubEs2g==/6597949375958733450.jpg" width=400 type="image">


  ◆圆形羽化的属性与参数是tyle="FILTER: alpha(opacity=100,style=2)".
  ◆如果须要矩形羽化,把羽化属性与参数改为style=3,即可.


圆形羽化图片显示结果:

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客



(4)图片左右颠倒实例代码:

<DIV align=center>
<IMG style="fliph: filter" src="http://img0.ph.126.net/iKgM750hL1eSGfoMubEs2g==/6597949375958733450.jpg" width=250 type="image"> <IMG style="FILTER: fliph" src="http://img0.ph.126.net/iKgM750hL1eSGfoMubEs2g==/6597949375958733450.jpg" width=250 type="image"></DIV> <BR><BR>


◆filter:fliph (向右)
◆fliph:filter (向左)


显示结果:

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客 调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客



 




 (5)立体阴影框实例代码:
<DIV align=center>
<TABLE style="FILTER: progid:DximageTransform.Microsoft. shadow(color:#00CD66 ,direction:145,strength:20)" borderColor=#ee0000 cellSpacing=35 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD background=http://img0.ph.126.net/_XSPRZoFC8sTLKZoH85byg==/6598252841167877050.jpg width=300 height=400></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <BR><BR><BR><BR>


显示结果:







 (6)图片加短矩形边框实例代码:
<CENTER><IMG style="BORDER-BOTTOM: #8b008b 12px dashed; BORDER-LEFT: #8b008b 12px dashed; BORDER-TOP: #8b008b 12px dashed; BORDER-RIGHT: #8b008b 12px dashed" src="http://img1.ph.126.net/GNnMpKp7jzrklICjRGanQg==/6597830628702933941.jpg" width=350 )> </CENTER>


显示结果:

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客



 (7)图片加立体边框实例代码:
<CENTER><IMG style="BORDER-BOTTOM: #fbd44c 22px ridge; BORDER-LEFT: #fbd44c 22px ridge; BORDER-TOP: #fbd44c 22px ridge; BORDER-RIGHT: #fbd44c 22px ridge" src="http://img1.ph.126.net/GNnMpKp7jzrklICjRGanQg==/6597830628702933941.jpg" width=350 )?> </CENTER>


显示结果:

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客



击点打开html代码浏览器

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客
  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编

(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)





23种CSS图片修饰效果演示

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客


1。单线框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

2。双线框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

3。凸出框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

4。凹进框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

5。邮票框



6。虚线框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

7。凹槽框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客


8。脊状框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

9。立体阴影框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

10。阴影框

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

11。横向渐变透明

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

12。圆形渐变透明

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

13。X形渐变透明

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

14。改变某种颜色

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

15。黑白效果

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

16。X光效果(底片)

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

17。浮雕效果

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

18。上下颠倒

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

19。左右颠倒

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

20。色彩颠倒

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

21。粒状阴影


调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客


22。模糊效果

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

23。水波效果(风吹)

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客


23种CSS图片修饰效果代码:

23种CSS图片修饰效果代码:

<CENTER><img src="http://img3.bimg.126.net/photo/kABMYIUJg3IRVuggzmMepg==/1176002452697585183.jpg"></CENTER> <br><br> 1。单线框<br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:3 solid #ff0000"><br><br> 2。双线框 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:8 double green"><br><br> 3。凸出框 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="border:25 outset #ff88ff"><br><br> 4。凹进框 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 inset #ff88ff"><br><br> 5。邮票框 <br><br> <table style="border:3 dashed; #f6ae56" cellspacing="1" cellpadding="0" bgcolor="#f6ae56"> <tr><td bgcolor="#aeffae" width=360 height=180 align=center ><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"> </TD></TR></TABLE> <br><br> 6。虚线框 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:4 dashed #ff0000"><br><br> 7。凹槽框 <br><br><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 groove green" border="0"><br><br> 8。脊状框 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 ridge green" border="0"><br><br> 9。立体阴影框 <br><br> <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://sucai.heima.com/sucai/news/xhtp/24.jpg"><br><br> </TD></TR></TBODY></TABLE> 10。阴影框 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:shadow(color=#32cd32)"><br><br> 11。横向渐变透明 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"><br><br> 12。圆形渐变透明 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"><br><br> 13。X形渐变透明 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"><br><br> 14。改变某种颜色 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="FILTER: Chroma(Color=#13629f)"><br><br> 15。黑白效果 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:'gray'"><br><br> 16。X光效果(底片) <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:'xray'"><br><br> 17。浮雕效果 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"><br><br> 18。上下颠倒 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:flipv"> <br><br> 19。左右颠倒 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:fliph"><br><br> 20。色彩颠倒 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:invert"><br><br> 21。粒状阴影 <CENTER><div id="第1个滤镜" style="filter:Glow(strength=25,color=#FF0000);width:600;height:450"

align=center><br><img

src="http://img0.ph.126.net/_XSPRZoFC8sTLKZoH85byg==/6598252841167877050.jpg"

height="400" width="400" border="0"></div></CENTER>22。模糊效果 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"><br><br> 23。水波效果(风吹) <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center> <br><br> </b></font> <CENTER><img src="http://img3.bimg.126.net/photo/kABMYIUJg3IRVuggzmMepg==/1176002452697585183.jpg"></CENTER>



调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客







 


您已欣赏本篇日志 调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客。谢谢朋友对我的支持!

 


 

调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客星系-ZDW欢迎您!调用CSS语句修饰图片边框 - 星系-ZDW. - 太师的博客

  评论这张
 
阅读(204)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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