CSS操作——边框属性

1、border-style（边框风格）

定义边框的风格，值可以有：

?

1 2 3 4 5 6 7 8

/* none：没有边框，当border的值为none的时候，系统将会忽略[border-color] hidden：隐藏边框，低版本浏览器不支持。 dotted：点状边框。 dashed：虚线边框。 solid：实线边框。 double：双实线边框，两条单线与其间隔的和等于border-width值。 */

　　

border-style的值可以缩写的：

?

1 2 3 4 5 6

/* 只有一个值的时候表示同时控制上下左右的边框风格。 只有两个值的时候表示分别控制上下、左右的边框风格。 有三个值的时候表示分别控制上、左右、下的边框风格。 有四个只的时候表示分别控制上、右、下、左的边框风格。 */

　　

border-style还可以单独指定不同方向：

?

1 2 3 4 5 6

/* border-top-style    设置上边的边框风格 border-bottom-style      设置下边的边框风格 border-left-style   设置左边的边框风格 border-right-style    设置右边的边框风格 */

　　

2、border-width（边框宽度）

 使用border-width可以定义边框的厚度，值可以是medium，thin，thick和指定数值的宽度。 同时，border-width也可以进行缩写：

?

1 2 3 4 5 6

/* 只有一个值的时候表示同时控制上下左右的边框宽度。 只有两个值的时候表示分别控制上下、左右的边框宽度。 有三个值的时候表示分别控制上、左右、下的边框宽度。 有四个只的时候表示分别控制上、右、下、左的边框宽度。 */

　　

border-width也可以单独指定不同方向：

?

1 2 3 4 5 6

/* border-top-width    设置上边的边框宽度 border-bottom-width     设置下边的边框宽度 border-left-width   设置左边的边框宽度 border-right-width    设置右边的边框宽度 */

　　

3、border-color（边框颜色）

定义边框的颜色，值表示的方式可以是十六进制，RGB十进制和单词表示法。

同上，border-color的缩写：

?

1 2 3 4 5 6

/* 只有一个值的时候表示同时控制上下左右的边框颜色。 只有两个值的时候表示分别控制上下、左右的边框颜色。 有三个值的时候表示分别控制上、左右、下的边框颜色。 有四个只的时候表示分别控制上、右、下、左的边框颜色。 */

　　

border-color也可以单独指定不同方向：

?

1 2 3 4 5 6

/* border-top-color    设置上边的边框颜色 border-bottom-color 设置下边的边框颜色 border-left-color   设置左边的边框颜色 border-right-color    设置右边的边框颜色 */

　　

4、边框样式缩写

还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写：语法：

?

1	// border: 边框宽度 边框样式 边框颜色;

　　

注意，border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。