css边框属性border – CSS教程

上一章CSS教程请查看：css填充属性padding

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

CSS边框属性

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

边框宽度属性

border-width属性指定边界区域的宽度。它是一个简化属性，用于同时设置元素边框的所有四个边的厚度。

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

注意：如果border-width属性的值丢失或没有指定，将使用border-width的默认值(medium)。

边框样式属性

border-style属性设置框的边框样式，如：solid, dotted等。它是一个简写属性，用于为元素边框的所有四个边设置行样式。

border-style边框样式的属性可以取以下值之一：none, hidden, dashed, dotted, double, groove, inset, outset, ridge和solid。

• none: 定义没有边界。
• hidden: 定义隐藏的边框。
• dotted: 定义虚线边框
• dashed: 定义虚线边框
• solid: 定义实线边框
• double: 定义两个边框。两个边框的宽度与border-width值相同
• groove: 定义一个3D凹槽边界。效果取决于边框颜色值
• ridge: 定义一个三维的脊状边界。效果取决于边框颜色值
• inset: 定义一个3D inset边框。效果取决于边框颜色值
• outset: 定义一个3D开始边界。效果取决于边框颜色值

p {
    border-style: dotted;
}

边框颜色属性

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

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

注意：如果单独使用border-color属性，它将不起作用，使用border-style属性首先设置边框。

边框速记属性

border CSS属性是在单个规则中设置一个或多个单独的边框属性border-style、border-width和border-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;
}