CSS Border(边框)
元素的(Border)边框围绕填充和内容。
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属性设置框边框的样式,例如:solid,dotted等。它是用于设置元素边框所有四个侧面的线型的简写速记属性。
该border-style属性可采取以下值之一:none,hidden,dashed,dotted,double,groove,inset,outset,ridge和solid。
none: 没有边界。
dotted: 定义虚线边框
dashed: 定义虚线边框
solid: 定义实线边框
double:定义两个边框。两个边框的宽度与border-width值相同
groove:定义3D沟槽边框。效果取决于边框颜色值
ridge:定义3D脊状边框。效果取决于边框颜色值
inset:定义3D嵌入边框。效果取决于边框颜色值
outset:定义3D起始边框。效果取决于边框颜色值
p { border-style: dotted; }测试看看‹/›
(border-color)边框颜色属性
该border-color属性指定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速记属性时忽略或未指定单个border属性的值,则将使用该属性的默认值(如果有)。
注意:border-color在设置元素的边框时,如果缺少属性值或未指定属性值(例如border: 5px solid;),则该元素的color属性将用作的值border-color。
在此示例中,边框将是宽度为5px的黑色实线:
p { color: black; border: 5px solid; }测试看看‹/›
但是,在有border-style属性的情况下,省略该值将不会显示任何边框,因为这个时候border-style属性 的默认值为none。
在下面的示例中,将没有边框:
p { border: 5px #00ff00; }测试看看‹/›