logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

边框代码制作详解

 ぅ|く阔渔沉 2010-12-04
纯色彩边框制作

用颜色做成的一层图框

复制代码
  1. <TABLE borderColor=#ffd700 cellSpacing=10 cellPadding=10 width="800 "height="330" align=center bgColor=#0000ff border=16>
  2. <TBODY>
  3. <TR>
  4. <TD >
  5. <BR><BR><BR><BR><BR><BR>
  6. </TD></TR></TBODY></TABLE>



用颜色做成的二层图框

复制代码
  2. <TABLE borderColor=#808000 cellSpacing=3 cellPadding=1 width="800 "height="330" align=center bgColor=#ffff00 border=16>
  3. <TBODY>
  4. <TR>
  5. <TD >
  6. <TABLE borderColor=#80ff00 cellSpacing=3 cellPadding=3 width="780 "height="330" align=center bgColor=#0000ff border=8>
  7. <TBODY>
  8. <TR>
  9. <TD >
  11. <BR><BR><BR><BR><BR><BR>
  12. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


用颜色做成的三层图框
复制代码
  2. <TABLE borderColor=#808000 cellSpacing=3 cellPadding=1 width="800 "height="330" align=center bgColor=#ffff00 border=16>
  3. <TBODY>
  4. <TR>
  5. <TD >
  6. <TABLE borderColor=#80ff00 cellSpacing=3 cellPadding=3 width="780 "height="330" align=center bgColor=#0000ff border=8>
  7. <TBODY>
  8. <TR>
  9. <TD >
  11. <TABLE borderColor=#80ff00 cellSpacing=3 cellPadding=3 width="760 "height="330" align=center bgColor=#0000ff border=10>
  12. <TBODY>
  13. <TR>
  14. <TD >
  17. <BR><BR><BR><BR><BR><BR>
  18. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


图片边框制作

用图片作单层图框


复制代码
  1. <P align=center>
  2. <TABLE borderColor=660000 cellSpacing=10 cellpadding=20 background=http://image18.360doc.com/DownloadImg/2010/12/0412/7350431_1.gif width=760 height=300 border=10>
  3. <TR>
  4. <TD>
  5. <P align=center><font style=font:18pt face=华文行楷 color=0000ff>
  6. 中国音画，走遍天下
  7. </FONT></p>
  8. <BR><BR><BR><BR><BR>
  9. </td></tr></table></p>



双层图框代码
复制代码
  2. <P align=center>
  3. <TABLE cellSpacing=20 cellSpacing=15 width=800 align=center background=http://image18.360doc.com/DownloadImg/2010/12/0412/7350431_2.jpg border=1>
  4. <TBODY>
  5. <TR>
  6. <TD>
  7. <TABLE cellSpacing=5 cellPadding=5 width="100%" borderColorLight=#a9b5a1 background=http://image18.360doc.com/DownloadImg/2010/12/0412/7350431_3.jpg border=0>
  8. <TR>
  9. <TD>
  10. <P align=center><font style=font:30pt face=华文行楷 color=00ff00>
  11. 中国音画，走遍天下
  12. </FONT></p>
  13. <BR><BR><BR><BR><BR>
  14. </td></tr></table></td></tr></table></p>


用四张图片作表格背景的四层图框

复制代码
  1. <TABLE id=table1 style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px" borderColor=#6a1920 cellSpacing=30 align=center
  3. background=http://www./UploadFile/2006-2/200621812584753072.gif border=5>
  4. <TBODY>
  5. <TR>
  6. <TD>
  7. <TABLE cellSpacing=5 cellPadding=1 width="100%" background=http://image18.360doc.com/DownloadImg/2010/12/0412/7350431_4.jpg border=0>
  8. <TBODY>
  9. <TR>
  10. <TD>
  11. <TABLE cellPadding=15 width="100%" background=http://www./UploadFile/2006-2/200621812584753072.gif border=0>
  12. <TBODY>
  13. <TR>
  14. <TD>
  15. <TABLE cellSpacing=1 cellPadding=0 width="100%" background=http://bbs./UploadFile/2004-11/2004111918241100.jpg border=1>
  16. <TBODY>
  17. <TR>
  18. <TD>
  19. <P align=center><font style=font:30pt face=华文行楷 color=00ff00>
  20. 中国音画，走遍天下
  21. </FONT></p>
  22. <br><br><br><br><br>
  23. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>



用十张图片作表格背景的10层图框
复制代码
  2. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width=820 borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  4. 8/2004813135644130.jpg border=1>
  5. <TBODY><TR><TD>
  6. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  8. 8/200481313595718.jpg border=1>
  9. <TBODY><TR><TD>
  10. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  12. 8/2004813135644130.jpg border=1>
  13. <TBODY><TR><TD>
  14. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  16. 8/20048131404918.jpg border=1>
  17. <TBODY><TR><TD>
  18. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  20. 8/2004813135644130.jpg border=1>
  21. <TBODY><TR><TD>
  22. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=11 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  24. 8/2004813141196.jpg border=1>
  25. <TBODY><TR><TD>
  26. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  28. 8/2004813135644130.jpg border=1>
  29. <TBODY><TR><TD>
  30. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  32. 8/20048131407387.jpg border=1>
  33. <TBODY><TR><TD>
  34. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  36. 8/2004813135644130.jpg border=1>
  37. <TBODY><TR><TD>
  38. <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs./forum/UploadFile/2004-
  40. 8/20048131407387.jpg border=1>
  41. <TBODY><TR><TD>
  42. 。。。。。。<BR>
  43. <P align=center><font style=font:30pt face=华文行楷 color=ffff00>
  44. 中国音画，走遍天下
  45. </FONT></p>
  46. 。。。。。。<BR>
  47. <BR><BR>
  48. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
  49. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
  50. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
  51. </TD></TR></TBODY></TABLE>


CSS语言边框制作

背景颜色淡化暂变

复制代码
  2. <table border="15" width="760" cellspacing="5" cellpadding="5" bgcolor="#FFFF00" bordercolor="#800000" id="table1" height="260">
  3. <tbody>
  4. <tr>
  5. <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff', gradientType='1')"> 　
  6. </td></tr></tbody></table>



如沒有设定bordercolor, 那便默认为黑色


复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 border=12>


简单边框


复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff solid">


虚线粗边框

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff dashed">


虚线细边框

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff dotted">


双线边框

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff double">


立体边框1

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff groove">


立体边框2

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff ridge">


立体边框3

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff outset">


立体边框4

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="border:12px #00ffff inset">


另加框

复制代码
  1. <DIV align=center>
  2. <TABLE bgcolor=#999999 style="BORDER: #000000 2px dotted" cellSpacing=10 cellPadding=0>
  3. <TBODY>
  4. <TR>
  5. <TD style="BORDER: #000000 2px dotted" vAlign=center align=middle colSpan=2>
  6. <CENTER>
  7. <IMG style="FILTER: Blur(Add=1,Direction=45,Strength=180)" src=http:///attachments/wangbiao/wbCsg.gif width=360>
  8. </CENTER>
  9. </TD>
  10. </TR>
  11. </TBODY>
  12. </TABLE>
  13. </DIV>


花色虚线框

复制代码
  1. <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"
  3. src=http:///attachments/wangbiao/wbCsg.gif width=360></P><BR>



多种CSS语言集合边框

复制代码
  1. <BR><center><TABLE bgcolor=black style="border:12px #00ffff dashed"><TBODY><TR><TD><TABLE bgcolor=black style="border:12px #00ffff
  3. ridge"><TBODY><TR><TD><img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="filter:
  5. Gray"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></center><BR>


凸出框
复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="BORDER-RIGHT: #ff88ff 25px outset; BORDER-TOP: #ff88ff 25px outset; BORDER-LEFT: #ff88ff
  3. 25px outset; BORDER-BOTTOM: #ff88ff 25px outset">

凹进框

复制代码
  1. <img src=http:///attachments/wangbiao/wbCsg.gif width=360 style="BORDER-RIGHT: #ff88ff 25px inset; BORDER-TOP: #ff88ff 25px inset; BORDER-LEFT: #ff88ff
  3. 25px inset; BORDER-BOTTOM: #ff88ff 25px inset">

邮票框
复制代码
  2. <table style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; BORDER-BOTTOM: #f6ae56 3px dashed"
  4. cellspacing="5" cellpadding="0" bgcolor="#f6ae56">
  5. <tbody>
  6. <tr>
  7. <td valign="middle" align="center" width="360" bgcolor="#aeffae" height="200"><img src=http:///attachments/wangbiao/wbCsg.gif>
  8. </td></tr></tbody></table>

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

    来自： ぅ|く阔渔沉 > 《制作》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多