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;}

fontbackground 属性类似,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条边将出现重叠,在重叠区的计算规则是沿对角线平均分配。这样就形成了一个三角形效果。