几种图片代码特效 好好改造2005-07-20 06:57:11

ZT：

如沒有設定bordercolor, 那便默認為黑色

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" border=12>

加简单的CSS装饰框

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="border:12px #00ffff solid">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="border:12px #00ffff dashed">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="border:12px #00ffff dotted">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="border:12px #00ffff double">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="border:12px #00ffff groove">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="border:12px #00ffff ridge">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="border:12px #00ffff outset">

CSS滤镜

style="filter: Alpha(Opacity=100,Style=2)">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" <br>style="filter: Alpha(Opacity=100,Style=2)">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="filter: Alpha(Opacity=100,Style=3)">

水平翻转

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="filter: Fliph">

垂直翻转

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="filter: Flipv">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="filter: Gray">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="filter: Invert">

<img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="filter: Blur(Add=1,Direction=45,Strength=180)">

Freq=6波纹的频率,Lightstrength=10波纹的光照强度,值0---100,Strength=20振幅<br><img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" style="filter: Wave(Add=0,Freq=6,Lightstrength=10,Phase=0,Strength=20)">

<BR><br><P align=center><br><CENTER><br><TABLE style="BORDER-RIGHT: #ababab 1px solid; BORDER-TOP: #ababab 1px solid; BORDER-LEFT: #ababab 1px solid; BORDER-BOTTOM: #ababab 1px solid; BACKGROUND-COLOR: #dcdcdc" cellSpacing=10 cellPadding=0 border=0><br><TBODY><br><TR><br><TD style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" vAlign=center align=middle colSpan=2><br><CENTER><img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' style="FILTER: Blur(Add=1,Direction=45,Strength=180)" src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" width=390></CENTER></TD></TR></TBODY></TABLE></CENTER><br><P></P>

加點變化

<BR><P align=center><img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' style="BORDER-RIGHT: red 8px dashed; BORDER-TOP: green 8px dotted; BORDER-LEFT: yellow 8px dashed; BORDER-BOTTOM: blue 8px dotted" src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" width=390></P><BR>

<BR><center><TABLE bgcolor=black style="border:12px #00ffff dashed"><TBODY><TR><TD><TABLE bgcolor=black style="border:12px #00ffff ridge"><TBODY><TR><TD><img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' width=390 src=http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif style="filter: Gray"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></center><BR>

做圖的方法很多, 上面的是用了兩個框的效果, 其實用一個框也能做出相同效果的. 只要在 < TD> 加點變化.

<BR><br><CENTER><br><TABLE style="BORDER-RIGHT: #00ffff 12px dashed; BORDER-TOP: #00ffff 12px dashed; BORDER-LEFT: #00ffff 12px dashed; BORDER-BOTTOM: #00ffff 12px dashed" bgColor=black><br><TBODY><br><TR><br><TD style="BORDER-RIGHT: #00ffff 12px ridge; BORDER-TOP: #00ffff 12px ridge; BORDER-LEFT: #00ffff 12px ridge; BORDER-BOTTOM: #00ffff 12px ridge" bgColor=black><img class="img-responsive" onload='javascript:if(this.width>850) this.width=850' style="FILTER: Gray" src="http://vcom.hnby.com.cn/dhbbs/UploadFile/2005-7/200572011264682519.gif" width=390></TD></TR></TBODY></TABLE></CENTER><BR>

不错，学习边框设计的好教程，谢谢你

嗯，又学了两手

回复：几种图片代码特效

这个很实用,保存下来了,谢谢!