CSS定义边框样式

 

CSS使用border属性定义边框样式。语法：

border:line-width || line-stle || color

说明：line-width：设置对象边框宽度。line-style：设置对象边框样式。color：设置对象边框颜色。

每个边又分别派生出三个子属性，（border-top，border-left，border-bottom，border-right），以border-top为例。

border-top-style：样式。border-top-color：颜色。border-top-width：宽度。

以上这些属性中，是基础。语法：

border-style:none | hidden | dotted | solid | double | groove | ridge | inset | outset

说明：none：无轮廓，border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即：border-image。

hidden：隐藏边框。dotted：点状轮廓。dashed：虚线轮廓。solid：实线轮廓。double：双线轮廓，两条单线与其间隔的和等于指定的border-width值。groove：3D凹槽轮廓。ridge：3D凸槽轮廓。inset：3D凹边轮廓。outset：3D凸边轮廓。

注意：与margin、padding属性相同，border及其分类子属性设置值的说明如下：

① 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

② 如果只提供一个参数，将用于全部的四边。

③ 如果提供两个参数，第一个用于上、下边框，第二个用于左、右边框。

④ 如果提供三个参数，第一个用于上边框，第二个用于左、右边框，第三个用于下边框。

⑤ 如果border-width等于0，本属性将失去作用。

示例：

<div class="box"></div>

.box{
	border: solid 100px;  /*边框样式和宽度*/
	border-color: red yellow blue green; /*定义不同边框显示为不同颜色*/
	line-height: 0; /*定义行内文本高度为0，这样就避免元素内出现空隙*/
}

浏览器显示效果：