CSS 边框

CSS 边框 (border) 属性定义围绕元素的边框。

CSS 边框属性允许你规定元素边框的样式和颜色。在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。

CSS 边框

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

边框的宽度、样式和颜色

每个边框有 3 个方面:其宽度或粗细、其样式或外观,以及其颜色。

边框宽度默认为 medium,这个值没有明确定义,不过通常是 2 个像素。尽管如此,你不一定能看到边框,原因是边框的默认值为 none,这样一来,就不会有边框了。如果边框没有样式,就不会存在。

默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色,它将与元素的文本颜色相同。另一方面,如果一个元素没有任何文本,那么该元素将继承其父元素的文本颜色。

边框与背景

CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。

CSS 边框实例:

所有边框属性在一个声明之中
本例演示用简写属性来将所有四个边框属性设置于同一声明中。
设置四边框样式
本例演示如何设置四边框样式。
设置每一边的不同边框
本例演示如何在元素的各边设置不同的边框。
所有边框宽度属性在一个声明之中
本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
设置四个边框的颜色
本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
所有下边框属性在一个声明中
本例演示用简写属性来将所有下边框属性设置在同一声明中。
设置下边框的颜色
本例演示如何设置下边框的颜色。
设置下边框的样式
本例演示如何设置下边框的样式。
设置下边框的宽度
本例演示如何设置下边框的宽度。
所有左边框属性在一个声明之中
所有左边框属性在一个声明之中
设置左边框的颜色
本例演示如何设置左边框的颜色。
设置左边框的样式
本例演示如何设置左边框的样式。
设置左边框的宽度
本例演示如何设置左边框的宽度。
所有右边框属性在一个声明之中
本例演示一个简写属性,用于把所有右边框属性设置在一条声明中。
设置右边框的颜色
本例演示如何设置右边框的颜色。
设置右边框的样式
本例演示如何设置右边框的样式。
设置右边框的宽度
本例演示如何设置右边框的宽度。
所有上边框属性在一个声明之中
本例演示用简写属性来将所有上边框属性设置于同一声明之中。
设置上边框的颜色
本例演示如何设置上边框的颜色。
设置上边框的样式
本例演示如何设置上边框的样式。
设置上边框的宽度
本例演示如何设置上边框的宽度。

CSS 边框属性

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。