6.4 CSS 边界（border）

如前所述，HTML元素被渲染为矩形，因此它有4个边：上（top），下（bottom），左（left）和右（right）。

border属性和位置

CSS边界有3个属性：

• border-color 使用颜色单位定义颜色
• border-style 可以是实线（solid）、虚线（dashed）、点线（dotted）等
• border-width 使用尺寸单位定义宽度

CSS边界有4个位置：

• border-top
• border-bottom
• border-left
• border-right

当不指定位置时，属性值应用于所有4个位置上。

blockquote{ border-color: yellow; border-style: solid; border-width: 1px;}

和 font 和 background 属性类似，border 是CSS边界属性定义的速写方式，上述定义可以缩写为：

blockquote{ border: 1px solid yellow;}

单个边界

如果想把属性设置在单个边界上，需要把位置（position）包含在CSS属性中，比如下边界：

blockquote{ border-bottom-color: yellow; border-bottom-style: solid; border-bottom-width: 1px;}

类似的，速写如下：

blockquote{ border-bottom: 1px solid yellow;}

我们还可以使用 none 属性值来取消所有边界或某个边界，下面的代码最终效果是定义了3条边界（除了左边界）：

blockquote{ border: 1px solid yellow; border-left: none;}

3个属性和4个位置组合起来会有共12种CSS边界属性写法，但通常我们只用如下5种缩写：

• border
• border-top
• border-bottom
• border-left
• border-right

有趣的实例 - 三角形

border属性一个常用的例子是创建三角形指示图标。

div {
    width: 0;
    height: 0;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent #78876E transparent;
}

上面这个例子实现了一个向上的三角形。其原理是由于div本身宽高为0，那么4条边将出现重叠，在重叠区的计算规则是沿对角线平均分配。这样就形成了一个三角形效果。