边框属性实例（二）

你的位置是:CSS教程->CSS实例篇

边框属性实例（一）

1.border-top-style参数

源代码已在下面文本框列出，以供参考：

2.border-right-style参数

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-right-style参数</TITLE><STYLE>DIV {border:red 10px;height:100px}.border-right-style {border-right-style:dashed}</STYLE></HEAD><DIV class="border-right-style">边框区右边的边框样式是虚线。</DIV>

3.border-bottom-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

4.border-left-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

5.border-style参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

6.border-top参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

7.border-right参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

8.border-bottom参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-bottom参数</TITLE><STYLE>DIV {border:solid 1px}.border-bottom {border-bottom:dashed 10px yellow}</STYLE></HEAD><DIV class="border-bottom">边框底部是黄色的虚线，宽度为10px。</DIV>

9.border-left参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

10.border参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

11.border-collapse参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

12.border-spacing参数

用法实例如下：点击这里看运行效果

源代码已在下面文本框列出，以供参考：

<HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>border-spacing参数</TITLE><STYLE>TABLE {border-collapse:separate;border:solid red 5px;border-spacing:10px 20px}TD {border:solid blue 5px}TR {border:solid yellow 5px;color:green}</STYLE></HEAD><TABLE> <TR> <TD>参数border-spacing</TD> <TD>单元格间距</TD> </TR> <TR> <TD>水平间距为10px</TD> <TD>垂直间距为20px</TD> </TR></TABLE>