分享

和讯博客技巧——制作精美边框

 任敏和 2010-12-01
一直以来,就是使用别人设计制作的边框,但是,总有些不大符合自己的心意,下面我尝试着自己做一些自己喜欢的边框,

 第一步,先找一张喜欢的图片,比如说从百度中找,找到之后再图片上点击右健,在弹出的菜单中找到“属性”,然后点击打开“属性”,那里面有一个“地址(url)”把它复制下来,备用。

第二步, 把边框的代码复制粘贴到代码中来。画框的代码很多,只不过是重复使用就可了。这是边框线的代码

1。单线框<center><img src="http://www./person/yiyi/jpg/1.jpg" style="border:3 solid #ff0000"><br><br><br></center>

2。双线框<center> <img src="http://www./person/yiyi/jpg/2.jpg" style="border:5 double green"><br><br><br></center>

3。凸出框<center> <img src="http://www./person/yiyi/jpg/3.jpg"style="border:25 outset #ff88ff"><br><br><br></center>

4。凹进框<center> <img src="http://www./person/yiyi/jpg/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./person/yiyi/jpg/5.jpg"> </td></tr></table></center>

6。虚线框<center> <img src="http://www./person/yiyi/jpg/6.jpg" style="border:4 dashed #ff0000"><br><br><br></center>

7。凹槽框<center> <img src="http://www./person/yiyi/jpg/7.jpg" style="border:25 groove green" border="0"><br><br><br></center>

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

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

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

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

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

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

15。黑白效果<center><img src="http://www./person/yiyi/jpg/15.jpg" style="filter:'gray'"></center>

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

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

18。上下颠倒<center><img src="http://www./person/yiyi/jpg/18.jpg" style="filter:flipv"> </center>

19。左右颠倒<center><img src="http://www./person/yiyi/jpg/19.jpg" style="filter:fliph"></center>

20。色彩颠倒<center><img src="http://www./person/yiyi/jpg/20.jpg" style="filter:invert"></center>

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

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

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

复制好边框现代码之后,把边框现代码中的红色抵制换成我们选择好的图片的地址代码。如果希望画框做得更好看,可以重复使用这些边框线的代码。

 0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}">

复杂一点的

 0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}" border=0>

更好的、

 0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}">

在接下来,我们开始在自己做的图片上写文字,这是使用代码   <TABLE align=center background="背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%"><TBODY><TR><TD>

 内容,文字或图片..... made by vivian_liu

 </TD></TR></TBODY></TABLE>

把这组代码粘贴道博客中来,然后把代码蓝色的部分协商自己喜欢的文章,把“背景图”的地址换成自己刚做好的画框地址。。保存,就可以了。

 

1、<left><img src="http://wmh0199./files/bbs/upload/7/566259.gif" style="filter:fliph"></left>

2、<left><><2img src="http://wmh0199./files/bbs/upload/7/566259.gif" style="filter:''gray''"></left>

3、<left><><img src="http://wmh0199./files/bbs/upload/7/566259.gif" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></left>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约