图像制作代码

图像制作代码

2005-07-21 21:23:24

www.japanvips.com

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

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" border=12>

www.japanvips.com

加简单的CSS装饰框

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="border:12px #00ffff solid">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="border:12px #00ffff dashed">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="border:12px #00ffff dotted">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="border:12px #00ffff double">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="border:12px #00ffff groove">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="border:12px #00ffff ridge">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="border:12px #00ffff outset">

www.japanvips.com

CSS滤镜

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

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" <br>style="filter: Alpha(Opacity=100,Style=2)">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="filter: Alpha(Opacity=100,Style=3)">

www.japanvips.com

水平翻转

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="filter: Fliph">

www.japanvips.com

垂直翻转

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="filter: Flipv">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="filter: Gray">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="filter: Invert">

www.japanvips.com

<img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="filter: Blur(Add=1,Direction=45,Strength=180)">

www.japanvips.com

Freq=6波纹的频率,Lightstrength=10波纹的光照强度,值0---100,Strength=20振幅<br><img onload='javascript:if(this.width>850) this.width=850' width=390 src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" style="filter: Wave(Add=0,Freq=6,Lightstrength=10,Phase=0,Strength=20)">

www.japanvips.com

<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 onload='javascript:if(this.width>850) this.width=850' style="FILTER: Blur(Add=1,Direction=45,Strength=180)" src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" width=390></CENTER></TD></TR></TBODY></TABLE></CENTER><br><P></P>

www.japanvips.com

加點變化

<BR><P align=center><img 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://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" width=390></P><BR>

www.japanvips.com

<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 onload='javascript:if(this.width>850) this.width=850' width=390 src=http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg style="filter: Gray"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></center><BR>

www.japanvips.com

做圖的方法很多, 上面的是用了兩個框的效果, 其實用一個框也能做出相同效果的. 只要在 < 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 onload='javascript:if(this.width>850) this.width=850' style="FILTER: Gray" src="http://satsuki.ex.osaka-kyoiku.ac.jp/~j049332/yoru.jpg" width=390></TD></TR></TBODY></TABLE></CENTER><BR>