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

琳达 博客

海外游子

 
 
 

日志

 
 

【转载】14:调用CSS语句修饰图片边框  

2014-08-04 11:54:41|  分类: 默认分类 |  标签: |举报 |字号 订阅

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

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


格林浪人 整编
调用CSS语句修饰图片边框

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

  (1)HTML贴图标签代码如下:
<INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg"type=image width=350 style="border:16px #0000ff double">

显示结果:

14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!



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

<INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg"type=image width=350 style="border:25px #2828FF double">
  ◆style=套用CSS标记.
  ◆border:25px #2828FF double 双线边框语句,宽25点,蓝色.

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

14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!



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

<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" width=400 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF00FF,strength=40)"></CENTER>

显示结果:

14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!



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

<table style="border:4 dashed #f6ae56" cellspacing="6" cellpadding="0" bgcolor="#f6ae56"> <tr> <td bgcolor="#aeffae" width=400 height=400 align=center valign=middle> <INPUT src="http://www.zxtx.org/user/yiyi/yiyijch/23/5.jpg"type=image width=400 > </TD></TR></TBODY></TABLE>

显示结果:



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

<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg" type=image width=400>

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


圆形羽化图片显示结果:




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

<INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg"type=image width=250 style="filter:fliph"> <INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg"type=image width=250 style="fliph:filter">

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


显示结果:




 (5)立体阴影框实例代码:
<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://photo4.hexun.com/p/2006/1227/65682/b_FB62298B118B3138C93268EEC6F09B98.jpg"> </td></tr></table></center> <br><br> <CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/20089195151190032.gif"></CENTER>

显示结果:

14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!



 (5)图片加短矩形边框实例代码:
<center> <img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" width=350 style="border:12px #8B008B dashed")> </CENTER>

显示结果:

14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!



 (6)图片加立体边框实例代码:
<center> <img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" width=350 style="border:22px #fbd44c ridge" ) </CENTER>

显示结果:

14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!


23种CSS图片修饰效果演示
1。单线框

14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
2。双线框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
3。凸出框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
4。凹进框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
5。邮票框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
6。虚线框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
7。凹槽框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
8。脊状框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
9。立体阴影框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!

10。阴影框
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
11。横向渐变透明
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
12。圆形渐变透明
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
13。X形渐变透明
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
14。改变某种颜色
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!

15。黑白效果
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
16。X光效果(底片)
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
17。浮雕效果
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
18。上下颠倒
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您! 
19。左右颠倒
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
20。色彩颠倒
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
21。粒状阴影
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您! 
22。模糊效果
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!
23。水波效果(风吹)
14:调用CSS语句修饰图片边框 - 格林浪人 - 格林浪人 欢迎您!


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

23种CSS图片修饰效果代码: <CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/2008919516673537.gif"></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。粒状阴影 <br><br> <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"> <br><br> 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://bbs.gw.com.cn/UploadFile/2008-9/20089195151190032.gif"></CENTER>


击点打开html代码浏览器

  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
2010年7月11日 格林浪人整编

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

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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