代码11.18 边框样式设置：box_border.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>边框样式设置</title>
<style type="text/css">
* {margin: 0px;}
#all{width:400px;
height:270px;
margin:0px auto;
background-color:#ccc;}
#a,#b,#c,#d,#e,#f,#g{width:160px;
height:50px;
text-align:center;
line-height:50px;
background-color:#eee;}
#a{width:380px;
margin:5px;
border:1px solid #333;}
#b{border:20px solid #333;
float:left;}
#c{margin-left:5px;
border:20px groove #f00;}
#d{margin-left:5px;
border:2px dashed #000;
float:left;}
#e{margin-left:5px;
border:2px dotted #000;
float:left;}
#f{margin:5px;
border-left:2px solid #fff;
border-top:2px solid #fff;
border-right:2px solid #333;
border-bottom:2px solid #333;
float:left;}
#g{margin-top:5px;
border-top:2px groove #333;}
</style>
</head>
<body>
<p id="all">
<p id="a">a盒子</p>
<p id="b">b盒子（solid类型）</p>
<p id="c">c盒子（groove类型）</p>
<p id="d">d盒子（dashed类型）</p>
<p id="e">e盒子（dotted类型）</p>
<p id="f">f盒子</p>
<p id="g">g盒子</p>
</p>
</body>
</html>
为了更方便看到p的表现，笔者给外部p设置了#ccc背景色，并给内部p设置了#eee背景色。在浏览器地址栏输入http://localhost/box_border.htm，浏览效果如图11.21所示。
图11.21 边框样式设置
这个例子使XHTML对象看起来更像个盒子了，只是边框只是盒子包装中的一层，最外层的包装是不可见的外边距。边框的宽度计算非常重要，如果读者定位元素要充分考虑边框宽度，如图11.21所示，边框的常用设置方法为：
border:宽度类型 颜色;
这是4条边框统一的设置方法，如果要分开设置4条边框，将border改为border-top（顶部边框）、border-bottom（底部边框）、border-left（左边框）和border-right（右边框）。而修改“类型”可以修改成不同样子的边框线条，常用的为solid（实线）、dashed（虚线）、dotted（点状线）、groove（立体线）、double（双线）、outset（浮雕线）等，读者可以一一尝试。
