HTML 高级教程之二

品味初级学堂

 

┊品┊﹎味﹎
.....................
 
 HTML 高级教程之二

 

 如何用属性颜色组合完美的框中框

......................................

           有很多漂亮的帖子边框是怎么做成？一些是现成的像框或三合一的花边图框做成，大部份是应用表格的相关属性做成的。做图框的素材可用颜色也可用图片。或颜色与图片组成。用颜色做成的图框，不受条件所限，隐定性较好，显示也快。用网络上的图片地址做成的多层图框叫套装，非常精彩漂亮 ，但有时会因网络失去链接，无法显示。

温 馨提示

#555555 颜色可变。10px 大小可变。width=300 宽度可变

 

下面是效果与代码

                                               

 

1.槽线边框表格

 

<TABLE style="BORDER-RIGHT: #555555 10px groove; BORDER-TOP: #555555 10px groove; BORDER-LEFT: #555555 10px groove; BORDER-BOTTOM: #555555 10px groove; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

 2.脊线边框表格

<TABLE style="BORDER-RIGHT: #555555 10px ridge; BORDER-TOP: #555555 10px ridge; BORDER-LEFT: #555555 10px ridge; BORDER-BOTTOM: #555555 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

3.内凹效果边框

<TABLE style="BORDER-RIGHT: #555555 10px inset; BORDER-TOP: #555555 10px inset; BORDER-LEFT: #555555 10px inset; BORDER-BOTTOM: #555555 10px inset; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD>
</TR></TBODY></TABLE>

 

4.外凸效果边框

<TABLE style="BORDER-RIGHT: #555555 10px outset; BORDER-TOP: #555555 10px outset; BORDER-LEFT: #555555 10px outset; BORDER-BOTTOM: #555555 10px outset; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD>
</TR></TBODY></TABLE>

 

5.外虚内实边框

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#555555 height=100 cellSpacing=8 cellPadding=2 width=300 align=center bgColor=#555555 border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #555555 3px solid; BORDER-TOP: #555555 3px solid; BACKGROUND: #333333; BORDER-LEFT: #555555 3px solid; BORDER-BOTTOM: #555555 3px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

7.双实线边框表格

<TABLE borderColor=#555555 height=100 cellPadding=2 width=300 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

8.点线边框表格

<TABLE style="BORDER-RIGHT: #555555 3px dotted; BORDER-TOP: #555555 3px dotted; BORDER-LEFT: #555555 3px dotted; BORDER-BOTTOM: #555555 3px dotted; BORDER-COLLAPSE: collapse" borderColor=#333333 height=100 cellPadding=2 width=300 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

9.单实线边框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

10.立体阴影边框表格

<TABLE style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#333333,direction:130,strength:10)" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>立体阴影边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

11.水平颠倒边框表格

 

<TABLE style="filter:fliph" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>水平颠倒边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

12.上下颠倒边框表格

<TABLE style="filter:flipv" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>上下颠倒边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

 

 

 

 

 

13.浮雕特效边框表格

 

 

 

<TABLE style="filter:progid:DXImageTransform.Microsoft.Emboss()" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
浮雕特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

14.色彩渐变特效边框表格

<TABLE style="filter:invert" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
色彩渐变特效边框表格
</DIV></TD></TR></TBODY></TABLE> 

 

14.X光特效边框表格

<TABLE style="filter:'xray'" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
X光特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

15.黑白特效边框表格

<TABLE style="filter:'gray'" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
黑白特效边框表格
</DIV></TD></TR></TBODY></TABLE>
特效边框表格

 16.颗粒阴影特效边框表格

<TABLE style="filter:progid:DXImageTransform.Microsoft.Glow(color=#333333,strength=12)" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
颗粒阴影特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

 

色彩表

aliceblue
(#F0F8FF)		 antiquewhite
(#FAEBD7)		 aqua
(#00FFFF)		 aquamarine
(#7FFFD4)
azure
(#F0FFFF)		 beige
(#F5F5DC)		 bisque
(#FFE4C4)		 black
(#000000)
blanchedalmond
(#FFEBCD)		 blue
(#0000FF)		 blueviolet
(#8A2BE2)		 brown
(#A52A2A)
burlywood
(#DEB887)		 cadetblue
(#5F9EA0)		 chartreuse
(#7FFF00)		 chocolate
(#D2691E)
coral
(#FF7F50)		 cornflowerblue
(#6495ED)		 cornsilk
(#FFF8DC)		 crimson
(#DC143C)
cyan
(#00FFFF)		 darkblue
(#00008B)		 darkcyan
(#008B8B)		 darkgoldenrod
(#B8860B)
darkgray
(#A9A9A9)		 darkgreen
(#006400)		 darkkhaki
(#BDB76B)		 darkmagenta
(#8B008B)
darkolivegreen
(#556B2F)		 darkorange
(#FF8C00)		 darkorchid
(#9932CC)		 darkred
(#8B0000)
darksalmon
(#E9967A)		 darkseagreen
(#8FBC8B)		 darkslateblue
(#483D8B)		 darkslategray
(#2F4F4F)
darkturquoise
(#00CED1)		 darkviolet
(#9400D3)		 deeppink
(#FF1493)		 deepskyblue
(#00BFFF)
dimgray
(#696969)		 dodgerblue
(#1E90FF)		 firebrick
(#B22222)		 floralwhite
(#FFFAF0)
forestgreen
(#228B22)		 fuchsia
(#FF00FF)		 gainsboro
(#DCDCDC)		 ghostwhite
(#F8F8FF)
gold
(#FFD700)		 goldenrod
(#DAA520)		 gray
(#808080)		 green
(#008000)
greenyellow
(#ADFF2F)		 honeydew
(#F0FFF0)		 hotpink
(#FF69B4)		 indianred
(#CD5C5C)
indigo
(#4B0082)		 ivory
(#FFFFF0)		 khaki
(#F0E68C)		 lavender
(#E6E6FA)
lavenderblush
(#FFF0F5)		 lawngreen
(#7CFC00)		 lemonchiffon
(#FFFACD)		 lightblue
(#ADD8E6)
lightcoral
(#F08080)		 lightcyan
(#E0FFFF)		 lightgoldenrodyellow
(#FAFAD2)		 lightgreen
(#90EE90)
lightgrey
(#D3D3D3)		 lightpink
(#FFB6C1)		 lightsalmon
(#FFA07A)		 lightseagreen
(#20B2AA)
lightskyblue
(#87CEFA)		 lightslategray
(#778899)		 lightsteelblue
(#B0C4DE)		 lightyellow
(#FFFFE0)
lime
(#00FF00)		 limegreen
(#32CD32)		 linen
(#FAF0E6)		 magenta
(#FF00FF)
maroon
(#800000)		 mediumaquamarine
(#66CDAA)		 mediumblue
(#0000CD)		 mediumorchid
(#BA55D3)
mediumpurple
(#9370DB)		 mediumseagreen
(#3CB371)		 mediumslateblue
(#7B68EE)		 mediumspringgreen
(#00FA9A)
mediumturquoise
(#48D1CC)		 mediumvioletred
(#C71585)		 midnightblue
(#191970)		 mintcream
(#F5FFFA)
mistyrose
(#FFE4E1)		 moccasin
(#FFE4B5)		 navajowhite
(#FFDEAD)		 navy
(#000080)
oldlace
(#FDF5E6)		 olive
(#808000)		 olivedrab
(#6B8E23)		 orange
(#FFA500)
orangered
(#FF4500)		 orchid
(#DA70D6)		 palegoldenrod
(#EEE8AA)		 palegreen
(#98FB98)
paleturquoise
(#AFEEEE)		 palevioletred
(#DB7093)		 papayawhip
(#FFEFD5)		 peachpuff
(#FFDAB9)
peru
(#CD853F)		 pink
(#FFC0CB)		 plum
(#DDA0DD)		 powderblue
(#B0E0E6)
purple
(#800080)		 red
(#FF0000)		 rosybrown
(#BC8F8F)		 royalblue
(#4169E1)
saddlebrown
(#8B4513)		 salmon
(#FA8072)		 sandybrown
(#F4A460)		 seagreen
(#2E8B57)
seashell
(#FFF5EE)		 sienna
(#A0522D)		 silver
(#C0C0C0)		 skyblue
(#87CEEB)
slateblue
(#6A5ACD)		 slategray
(#708090)		 snow
(#FFFAFA)		 springgreen
(#00FF7F)
steelblue
(#4682B4)		 tan
(#D2B48C)		 teal
(#008080)		 thistle
(#D8BFD8)
tomato
(#FF6347)		 turquoise
(#40E0D0)		 violet
(#EE82EE)		 wheat
(#F5DEB3)
white
(#FFFFFF)		 whitesmoke
(#F5F5F5)		 yellow
(#FFFF00)		 yellowgreen
(#9ACD32)

 

 

网络资源 与您分赏

 

教程编辑 / 明少

文章评论