CSS 边框

元素的边框围绕填充和内容。

CSS 边框属性

CSS 边框属性允许你定义框的边框区域。边框可以是预定义的样式,如实线,双线,虚线等,或者它可以是图像。以下部分将介绍如何设置定义边框样式(border-style),颜色(border-color)和宽度(border-width) 的各种属性。

border-width 属性

border-width 属性指定边框区域的宽度。它是一种速记属性,用于同时设置元素边框的所有四边的厚度。

p {
    border-width: medium 10px thick 15px;
}

注意: 如果 border-width 缺少或未指定属性的值,则将使用 border-width 默认值(medium)。

border-style 属性

border-style 属性设置框边框的样式,如: soliddotted 等。它是一个简写属性,用于设置元素边框的所有四个边的线条样式。

border-style 属性可采取以下值之一: nonehiddendasheddotteddoublegrooveinsetoutsetridgesolid

none: 没有边界。

hidden: 定义隐藏边框。

dotted: 定义虚线边框

dashed: 定义虚线边框

solid: 定义实线边框

double:定义两个边框。两个边框的宽度与 border-width 值相同

groove:定义 3D 凹槽边框。效果取决于边框颜色值

ridge:定义 3D 脊状边界。效果取决于边框颜色值

inset:定义 3D 插入边框。效果取决于边框颜色值

outset:定义 3D 开始边框。效果取决于边框颜色值

比如

p {
    border-style: dotted;
}

边框颜色属性

border-color 属性指定框的边框的 color 。这也是一个简写属性,用于设置元素边框的所有四边的颜色。

p {
    border-style: solid;
    border-color: #ff0000;
}

注意: border-color 如果单独使用该属性,则该属性不起作用。使用 border-style 属性首先设置边框。

border 速记属性

CSS 属性 border 是设置一个或多个单独的边框属性的速记属性,用单一的规则设置 border-styleborder-widthborder-color

p {
    border: 5px solid #ff4500;
}

如果在设置边框速记属性时省略或未指定单个边框属性的值,则将使用该属性的默认值(如果有)。

注意: 如果在设置元素的边框时缺少或未指定属性 border-color 的值(例如 border: 5px solid;),则元素的 color 属性的值将用作 border-color 的值。

在此示例中,边框将是 5px 宽度的纯黑线:

p {
    color: black;
    border: 5px solid;
}

但是,对于 border-style ,省略该值将导致根本不显示边框,因为 border-style 属性的默认值为 none

在下面的示例中,将没有边框:

p {
    border: 5px #00ff00;
}