|
可以为表格、层等对象设置边框的各种属性，如边框有无、宽度、颜色等。常用的属性有border-width、border-color、border-style等。
1、border-width及相关属性
设置对象边框的宽度，语法为：
border-width : medium | thin | thick | length
medium是默认值，表示默认宽度；thin表示边框小于默认宽度；thick表示大于默认宽度；length用于设置框宽度的具体值。
我们知道，矩形边框有上、下、左、右四条线，所以border-width既可以提供一个值，表示四边的统一宽度，也可以提供全部四个值。如果提供全部四个参数值，将按上→右→下→左的顺序作用于四个边框；如果提供两个值，则第一个用于上下边框，第二个用于左右边框；如果提供三个值，则第一个用于上边框，第二个用于左右边框，第三个用于下边框。
实际上，如果要分别设置四条边框的宽度，还可以使用border-top-width、border-right-width、border-bottom-width、border-left-width属性，其格式和border-width完全一样。
2、border-color及相关属性
设置边框颜色，语法为：
border-color : color
颜色color也可以有一到四个值。如果提供全部四个参数值，将按上→右→下→左的顺序作用于四个边框；如果只提供一个值，将用于全部的四条边；如果提供两个值，第一个用于上下边框，第二个用于左右边框；如果提供三个值，则第一个用于上边框，第二个用于左右边框，第三个用于下边框。
实际上，如果要分别设置四条边框的颜色，还可以使用border-top-color、border-right-color、border-bottom-color、border-left-color属性，其格式和border-color完全一样。
border-style及相关属性
设置边框的风格，语法为：
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
其中各个值的意义如下：
● none：默认值，无边框。不受任何指定的border-width值影响。
● hidden：隐藏边框。IE不支持。
● dotted：在MAC平台上IE4+与Windows和Unix台上IE5.5版本以上为点线。否则为实线。
● dashed：在MAC平台上IE4+与Windows和Unix平台上IE5.5版本以上为虚线。否则为实线。
● solid：实线边框。
● double：双线边框。两条单线与其间隔的和等于指定的 border-width 值。
● groove：根据 border-color 的值画3D凹槽。
● ridge：根据 border-color 的值画3D凸槽。
● inset：根据 border-color 的值画3D凹边。
● outset：根据 border-color 的值画3D凸边。
它也最多可以有四个值，其顺序和意义和border-width、border-color完全一样。而且还可以使用border-top-style、border-right-style、border-bottom-style、border-left-style属性分别设置四边风格，其格式和border-style完全一样。
【例12】测试边框线的设置。
<html>
<head>
<title>itsway ---- 边框</title>
<style type = "text/css">
table.t1{background-color: silver; table-layout:auto; border-width: 10px;
border-color:yellow; border-style: groove; text-align: left; }
</style>
</head>
<body>
<table class = "t1" border = "1">
<tr>
<td width = "120"><img src="cat1.jpg" width = "120"></td>
<td width = "300">背景色: silver; 表格布局:auto; <br>
边框宽度: 10px; 边框颜色:yellow; <br>
边框风格: groove; 文本对齐方式: left</td>
</tr>
</table>
</body>
</html>
在三大浏览器中的显示如下图所示。
似乎在IE中显示得比较生硬，但IE支持更多的border-style属性设置。读者可以用其它值来进一步测试。
【例13】测试四条边框线的设置。
<html>
<head>
<title>itsway ---- 边框</title>
<style type = "text/css">
table.t1{background-color: silver; table-layout:auto;
border-top-width: 5px; border-right-width: 10px;
border-bottom-width: 15px; border-left-width: 20px;
border-top-color:red; border-right-color:green;
border-bottom-color:blue; border-left-color:yellow;
border-top-style: groove; border-right-style: ridge;
border-bottom-style: inset; border-left-style: outset;
text-align: left; }
</style>
</head>
<body>
<table class = "t1" border = "1">
<tr>
<td width = "120"><img src="cat1.jpg" width = "120"></td>
</tr>
</table>
</body>
</html>
在三大浏览器中的浏览结果如下图所示。
4、border及相关属性
它是复合属性，语法为：
border : border-width || border-style || border-color
至于属性的设置，可以参阅上面将过的各参数对应的属性。默认值为：medium none。border-color的默认值将采用文本颜色。
如果使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如，设置：
border: thin
等于设置：
border: thin none
而border-color的默认值将采用文本颜色。因此，此前的任何border-color和border-width设置都会被清除。
与前面讲的类似，CSS中也有border-top、border-right、border-bottom、border-left-四个复合属性，用于分别设置四个边框，其语法格式和border完全一样，因此不再多说了。
上一篇：9、表格 下一篇：11、内留白和外留白
|
