你的位置:首页 > 网站技术 >正文
16
六月
分类:网站技术 | 评论数:0 | 点击数:2553 | 发表日期时间:2009-06-16 01:38:00

分享到:


本文导读:

CSS实现的边框效果_常用CSS代码收集
正文

在做网页时经常使用到一些使用CSS实现边框的实线、虚线效果,但CSS代码又不是很好记,所以在我的博客上记上这些代码,方便以后使用。

以下是使用CSS达到的边框效果,并在下方贴出源码。

#################

样式1
 

 点线深浅色

                                      


<table style="border:2px dotted royalblue;" cellpadding="4" cellspacing="4">
<tr><td style="border:2px dotted lightblue;">
<font size="2">在这里输入文字</td></tr></table>
 
 
样式2
 

点线幻彩

                                     


<table style="border:2px dotted hotpink;" cellpadding="4" cellspacing="4">
<tr><td style="border:2px dotted deepskyblue;">
<font size="2">在这里输入文字</font></td></tr>
</table>
 
 
样式3
 

              波浪型             

 


<table style="border:1px dashed deepskyblue;" cellspacing="5"
bgcolor="deepskyblue" cellpadding="5"><tr><td style="border:1px dashed white;"
 bgcolor="white">
<font size="2">在这里输入文字</font>
</td></tr></table></td>
</tr>
</table>
 
 
样式4 

            粗线彩虹         

 


<table cellpadding="4" cellspacing="0" style="border:double 5px plum;">
<tr><td style="border:double 5px lightblue;">
<font size="2">在这里输入文字 </font>
</td></tr></table>
 
 
样式5
 

          细线彩虹         

 


<table style="BORDER-RIGHT: dodgerblue 3px double;
BORDER-TOP: dodgerblue 3px double;
BORDER-LEFT: dodgerblue 3px double;BORDER-BOTTOM:
dodgerblue 3px double" cellSpacing="0"
cellPadding="0">
<tr><td>
<table style="BORDER-RIGHT: lightblue 3px double;
BORDER-TOP: lightblue 3px double;
 BORDER-LEFT: lightblue 3px double;
 BORDER-BOTTOM: lightblue 3px double" cellPadding="0">
<tr><td>
<table style="BORDER-RIGHT: dimgray 1px solid;
BORDER-TOP: dimgray 1px solid;
 BORDER-LEFT: dimgray 1px solid; BORDER-BOTTOM:
 dimgray 1px solid; BACKGROUND-COLOR: white"
cellPadding="7">
<tr><td><font size="2">在这里输入文字
</font></td>
</tr></table></td></tr>
</table></td>
</tr></table>
 
 
样式6
 

幻彩背景色


<table style="BORDER-RIGHT: lightblue 3px double;
 BORDER-TOP: lightblue 3px double;
BORDER-LEFT: lightblue 3px double;
 BORDER-BOTTOM: lightblue 3px double" height="100"
cellPadding="2" width="150">
<tr><td style="BORDER-RIGHT: plum 3px double;
BORDER-TOP: plum 3px double; BORDER-LEFT:
plum 3px double; BORDER-BOTTOM: plum 3px double;
 BACKGROUND-COLOR: aliceblue">
<p align="center">在这里输入内容</td></tr></table>
 
 
样式7
 
     圆点围边型

<table style="BORDER-RIGHT: plum 1px solid;
BORDER-TOP: plum 1px solid; BORDER-LEFT:
 plum 1px solid; BORDER-BOTTOM:plum 1px solid"
 height="100" cellPadding="5"
width="100" bgColor="#eee0e5"><tr>
<td style="BORDER-RIGHT: orchid 4px dotted;
BORDER-TOP: orchid 4px dotted;
BORDER-LEFT: orchid 4px dotted;BORDER-BOTTOM:
 orchid 4px dotted" bgColor="white">
<font size="2">在这里输入内容</font>
</td></tr></table>
 
 
样式8
 

     双层双色花边型  

                                      


<table style="BORDER-RIGHT:
lightblue 1px dashed; BORDER-TOP:
lightblue 1px dashed;
 BORDER-LEFT: lightblue 1px dashed;
 BORDER-BOTTOM: lightblue 1px dashed"
cellSpacing="5" cellPadding="3"
 bgColor="lightblue">
<tr><td style="BORDER-RIGHT: lightcyan
1px dashed; BORDER-TOP: lightcyan 1px
 dashed;
 BORDER-LEFT: lightcyan 1px dashed;
 BORDER-BOTTOM: lightcyan 1px dashed"
bgColor="lightcyan">
<table><tr>
<td style="PADDING-RIGHT: 6px;
PADDING-LEFT: 6px; PADDING-BOTTOM: 6px;
 PADDING-TOP: 6px" bgColor="white">
<font size="2">在这里输入文字
</font></td></tr>
</table>
</td>
</tr></table>
 
 
样式9
 

            虚线花边型          

 


<table style="BORDER-RIGHT:
lightblue
1px dashed; BORDER-TOP: lightblue
1px dashed;
BORDER-LEFT: lightblue 1px dashed;
 BORDER-BOTTOM: lightblue 1px dashed"
cellSpacing="3" cellPadding="4"
bgColor="lightblue"><tr>
<td style="BORDER-RIGHT: white
1px dashed; BORDER-TOP: white 1px dashed;
BORDER-LEFT: white 1px dashed;
BORDER-BOTTOM: white 1px dashed">
<font size="2">在此输入内容
</font></td>
</tr></table>
 
 
样式10

               标题               

 双层带标题

 

 


<table style="BORDER-RIGHT:
lightblue 1px solid; BORDER-TOP:
lightblue 1px solid; BORDER-LEFT:
lightblue 1px
solid; BORDER-BOTTOM: lightblue 1px
 solid" cellSpacing="5" cellPadding="4">
<tr><td style="BORDER-RIGHT: lightblue
1px dashed; BORDER-TOP: lightblue 1px
dashed; BORDER-LEFT: lightblue 1px
dashed; BORDER-BOTTOM: lightblue 1px
dashed" bgColor="lightblue"><font size="2">
标题</font></td></tr><tr>
<td><font size="2">在这里输入内容</font>
</td></tr></table>
 
 
样式11

*        标题     *
             彩色标题




<table><tbody><tr>
<td>
<div style="border:1px
 solid #1506;
background:#add8e6;
font-size:13px;
color:#1506">
<div style="
border-bottom:1px
solid
 #fff;padding:3px" align="center">
*   标题   *
</div><div style="
border-top:1px
dashed #999;background:#fff;
padding:10px" align="left">
在这里输入文字
</div></div>
</td></tr></tbody>
</table>
 
 
样式12

   彩色点线

                                   


<TABLE border="0" cellpadding="0"
 cellspacing="0" width="120"
 height="50" bgcolor="#ffd9e6"
align=center>
<TR><TD><TABLE border="0"
cellpadding="5" cellspacing="0"
width="100%"
 height="100%" style="
border:dotted 4px hotpink;">
<TR><TD bgcolor="white">
<font size="2">在这里输入文字
</font></TD></TR>
</TABLE>
</TD></TR>
</TABLE>
 
 
样式13

分行虚线 1
分行虚线 2
分行虚线 3
分行虚线 4

<TABLE border="0" style="border:
solid 1px hotpink;" bgcolor="white">
<TR><TD>
<TABLE border="0" style="border:
dotted 1px pink;">
<TR><TD align="center">
<TABLE border="0" cellpadding="3"
cellspacing="3" width="100%">
<TR><TD style="border-bottom:dotted
 1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
<TR><TD style="border-bottom:dotted
1px pink;"><font size="2">
在这里输入文字</font></TD></TR>
</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
 
 
本文标签:

上一篇:追逐彩虹的人

下一篇:CSS强制图片大小

猜你喜欢:
评论:

昵称(必填)

邮箱

网址

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。