4.8.3 边框border

盒子模型示意图：

border边框是围绕在元素周围的线条，可以用来装饰、区分元素或用来设置尺寸。例如下面的div：
<div style="width:200px;height:200px;background:#FFF;border:1px solid black">
    我有一个黑色的边框
</div>
上面的例子中，我们使用了border属性来设置边框。border属性支持三个值：border-width(宽度）、border-style（边框样式）和border-color（边框颜色）。它们依次设置边框的宽度、样式和颜色，这三个属性都要设置，缺少其中一个，边框就不会显示。此外，也可使用border-left、border-top等单独设置某个方向的边框。
下面是一个比较复杂的例子，展示了不同边框样式的效果：
<style>
#show{
    width: 200px;
    height: 200px;
    background: #FFF;
    border: 5px solid black;
    border-top-style: dashed;
    border-bottom-style: dotted;
    border-left-style: double;
    border-right-style: ridge;
}
</style>
<div id="show">
    不同边框样式的效果:上边框是dashed（一种虚线），左边框是双线double，右边框是立体线条ridge，但用得最多的还是实线solid
</div>
上述代码设置了5像素宽的黑色边框（为了看起来效果明显），并针对不同的方向使用不同的样式，包括虚线、点状线、双线条和立体线条等。你也可以设置其它的边框样式(例如：solid、groove、inset等)。总之，边框可以让元素显得更加美观和有层次感。
边框也可以只设置其中一条边，例如：
<style>
#show{
    width: 200px;
    height: 200px;
    background: #FFF;
    border: 5px black;
    border-top-style: solid;
}
</style>
<div id="show">
    只有顶端边框
</div>