css控制单边框颜色和大小讲解

& & & & & 边框是围绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的间隙是留给边框的，css可以用边框属性来定义它的样式、颜色和宽度等。 在html中人们用表格来制作文本周围的边框，但通过css来设置边框将有更出色的效果，而且可以应用于所有的元素。

& & & & &&边框分为上边框、右边框、下边框、左边框。 每个边框有3个方面：样式（或外观）、颜色、以及其宽度（粗细），下面我们分别重点解释这三项，先看下效果图。

& & & & &&边框样式（border-style）

& & & & &&设置元素所有边框的样式，或者单独地为各边设置边框样式。它有10个属性值，分别是：

& & & & &&none: 无样式；

& & & & &&hidden: 同样是无样式，主要用于解决和表格的边框冲突；

& & & & &&dotted: 点划线；

& & & & &&dashed: 虚线；

& & & & &&solid: 实线；

& & & & &&double: 双线,两条线加上中间的空白等于border-width的取值；

& & & & &&groove: 槽状；

& & & & &&ridge: 脊状,和groove相反；

& & & & &&inset: 凹陷；

& & & & &&outset:凸出,和inset相反；

&& & & & &&其中groove、ridge、inset、outset有些像3d效果，它的效果受border-color的影响。 border-style作用在四个方向时所用的方法和前面曾讲过的padding属性的书写方法相同，如果它书写四个参数值，将按照上-右-下-左的顺序定义边框。如果只设置一个，将用于四个边框统一设置。如果设置两个值，第一个作用于上下，第二个则作用与左右。如果设置三个值，第一个作用于上边框，第二个作用于左右边框，第三个作用于下边框。

& & & & &&单边边框的设置方法： &

& & & & &&设定上边框属性： &border-top，它的设置格式和border相同，依次设置宽度、样式、颜色：

& & & & &&border-top: border-width border-style border-color;&

& & & & &&border-top是将宽度、样式、颜色三种属性值放在一起设置的属性，如果要单独设置其中的任意一项也可以使用以下属性：border-top-width（单独设置上边框宽度）、border-style（单独设置上边框样式）、border-color（单独设置上边框颜色）。 &示例：

& & & & & #sbk01 {

& & & & &&border-top-width:1px;

& & & & &&border-top-style:dashed;

& & & & &&border-top-color:#ff0000;

& & & & &&}

& & & & &&/*设置上边框为宽度1像素的红色虚线*/} &

& & & & & 以上的效果如果用border-top来设置的话更简单一些，代码如下：

& & & & &&#sbk01 { border-top:1px dashed #ff0000; }&

& & & & &&设定右边框属性：border-right，border-right-width，border-right-style，border-right-color，设置方法同border-top。

& & & & &&设定下边框属性：border-bottom，border-bottom-width，border-bottom-style，border-bottom-color，设置方法同border-top。

& & & & &&设定左边框属性：border-left，border-left-width，border-left-style，border-left-color，设置方法同border-top。