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

六月

分类：网站技术 | 评论数：0 | 点击数：2406 | 发表日期时间：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

＊　　　标题　　　＊

彩色标题

<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强制图片大小