css边框属性border – CSS教程 css边框属性|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等。它是一个简写属性，用于为元素边框的所有四个边设置行样式。
【css边框属性border – CSS教程】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宽度的实线：