[07/01][傻兔教室]CSS 裝飾邊框制作

月儿发表于 2006-7-1 00:08:14

<DIV align=center><TABLE width=98% cellpadding=35 cellspacing=15 border=2 bgcolor=ivory><TBODY><TR><TD><BR><BR>
<BR><FONT size=3><P>如沒有設定bordercolor, 那便默認為黑色</P><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 border=12><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 border=12></TEXTAREA></center><BR><BR>

<BR>最簡單的<BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff solid"><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff solid"></TEXTAREA></center><BR><BR>

<BR><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff dashed"><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff dashed"></TEXTAREA></center><BR><BR>

<BR><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff dotted">
<BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff dotted"></TEXTAREA></center><BR><BR>

<BR><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff double"><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff double"></TEXTAREA></center><BR><BR>

<BR><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff groove"><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff groove"></TEXTAREA></center><BR><BR>

<BR><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff ridge"><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff ridge"></TEXTAREA></center><BR><BR>

<BR><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff outset"><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff outset"></TEXTAREA></center><BR><BR>

<BR><BR><center><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff inset"><BR><BR><TEXTAREA rows=5 cols=80><img src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="border:12px #00ffff inset"></TEXTAREA></center><BR><BR>

另加框
<BR><BR>
<DIV align=center>
<TABLE bgcolor=#999999 style="BORDER: #000000 2px dotted" cellSpacing=10 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="BORDER: #000000 2px dotted" vAlign=center align=middle colSpan=2>
<CENTER>
<IMG style="FILTER: Blur(Add=1,Direction=45,Strength=180)" src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500>
</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

<BR><BR><center><TEXTAREA rows=10 cols=80>
<DIV align=center>
<TABLE bgcolor=#999999 style="BORDER: #000000 2px dotted" cellSpacing=10 cellPadding=0>
<TBODY>
<TR>
<TD style="BORDER: #000000 2px dotted" vAlign=center align=middle colSpan=2>
<CENTER>
<IMG style="FILTER: Blur(Add=1,Direction=45,Strength=180)" src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500>
</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TEXTAREA>
</center><BR><BR>

<BR>加點變化<BR><center> <BR><P align=center><IMG style="BORDER-RIGHT: red 8px dashed; BORDER-TOP: green 8px dotted; BORDER-LEFT: yellow 8px dashed; BORDER-BOTTOM: blue 8px dotted" src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500></P><BR>
<BR><BR><TEXTAREA rows=5 cols=80> <BR><P align=center><IMG style="BORDER-RIGHT: red 8px dashed; BORDER-TOP: green 8px dotted; BORDER-LEFT: yellow 8px dashed; BORDER-BOTTOM: blue 8px dotted" src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500></P><BR></TEXTAREA></center><BR><BR>

<BR><BR><center><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 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="filter: Gray"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></center><BR><BR><BR><TEXTAREA rows=5 cols=80> <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 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500 style="filter: Gray"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></center><BR> </TEXTAREA></center><BR><BR>

<BR>做圖的方法很多, 上面的是用了兩個框的效果, 其實用一個框也能做出相同效果的. 只要在 < TD> 加點變化. </FONT><BR><center> <BR>
<CENTER>
<TABLE style="BORDER-RIGHT: #00ffff 12px dashed; BORDER-TOP: #00ffff 12px dashed; BORDER-LEFT: #00ffff 12px dashed; BORDER-BOTTOM: #00ffff 12px dashed" bgColor=black>
<TBODY>
<TR>
<TD style="BORDER: #00ffff 12px ridge" bgColor=black><IMG style="FILTER: Gray" src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500></TD></TR></TBODY></TABLE></CENTER><BR>
<BR><BR><TEXTAREA rows=6 cols=80>
<TABLE style="BORDER-RIGHT: #00ffff 12px dashed; BORDER-TOP: #00ffff 12px dashed; BORDER-LEFT: #00ffff 12px dashed; BORDER-BOTTOM: #00ffff 12px dashed" bgColor=black>
<TBODY>
<TR>
<TD style="BORDER: #00ffff 12px ridge" bgColor=black><IMG style="FILTER: Gray" src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg width=500></TD></TR></TBODY></TABLE></CENTER><BR></TEXTAREA></center><BR><BR><BR>

<BR><BR></TD></TR></TBODY></TABLE></DIV><BR>

[ 本帖最后由月儿于 2006-7-1 00:25 编辑 ]

绯舞发表于 2006-7-1 01:12:48

月儿教程又来了做上沙发慢慢学习中

sky30002001 发表于 2006-7-1 16:04:35

强人啊,厉害.好好学习中.

happy-yan 发表于 2006-7-1 16:23:20

不错对于初学者来说很好!很实用的说!

tonn 发表于 2006-7-2 18:24:15

謝謝月儿好帖学习中~!

rayboy 发表于 2006-7-3 05:47:12

正想学学，谢谢！！！

R00503 发表于 2006-7-3 19:25:07

不错，不错，等我慢慢领悟吧^^

小辣椒 发表于 2006-7-3 21:03:39

哇........粉厉害的说呢...恩,抢个位置好好学习~

不弃发表于 2006-7-3 21:28:36

<P><TABLE cellSpacing=0 cellPadding=0 align=center background="文字圖片" border=0><TBODY><TR><TD style="FILTER: chroma(color=#336699"><TABLE align=center background="面版背景"><TBODY><TR><TD align=middle><BR><BR><FONT style="FONT-SIZE: 30pt" face=华文幼园 color=#336699><B>"长命富贵"</P>
<P> </P>
<P> </P>
<P> </P>
<P></B></FONT><BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

[ 本帖最后由不弃于 2006-10-27 11:46 编辑 ]

happy-yan 发表于 2006-7-3 21:31:13

原帖由不弃于 2006-7-3 21:28 发表
谢谢!这个我会了.
试试发个贴吧^^

页: [1] 2

新萤火虫论坛's Archiver

[07/01][傻兔教室]CSS 裝 飾 邊 框 制 作

[07/01][傻兔教室]CSS 裝飾邊框制作