边框宽度—上3px，下左右1px。边框样式—单实线。

在例5-2中，先综合设置四边的边框宽度，然后单独设置上边框宽度进行覆盖，使上边框的宽度不同。

运行例5-2，效果如图5-5所示。

图5-5仅设置边框宽度

在图5-5中，段落文本并没有像预期的一样添加边框效果。这是因为在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。

在例5-2的CSS代码中，为标签添加边框样式，代码如下。

border-style:solid;        /*综合设置边框样式*/

保存HTML文件，刷新网页，效果如图5-6所示。

图5-6同时设置边框宽度和样式

在图5-6中，段落文本添加了预期的边框效果。

3.设置边框颜色

border-color属性用于设置边框的颜色，其取值可为预定义的颜色英文单词(如red、blue)、十六进制颜色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括号里是颜色色值或百分比)，实际工作中最常用的是十六进制颜色值。边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例如只包含图像的表格，其默认边框颜色为父元素的文本颜色。与边框样式和宽度相同，边框颜色的单边与综合设置方式如下。

border-top-color:上边框颜色;
border-right-color:右边框颜色;
border-bottom-color:下边框颜色;
border-left-color:左边框颜色;
border-color:上边框颜色[右边框颜色下边框颜色左边框颜色];

综合设置四边颜色必须按顺时针顺序采用值复制原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。

例如设置段落的边框样式为实线，上下边灰色，左右边红色，代码如下。

p {
    border - style: solid; /*综合设置边框样式*/
    border - color: # CCC # FF0000; /*设置边框颜色：两个值为上下、左右*/
}

再如设置二级标题的边框样式为实线，且下边框为红色，其余边框采用默认文本的颜色，代码如下。

h2 {
    border - style: solid; /*综合设置边框样式*/
    border - bottom - color: red; /*单独设置下边框颜色*/
}

注意：

1、设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效。

2、使用rgb模式设置颜色时，如果括号里面的数值为百分比，必须把“0”也加上百分号，写作“0%”

多学一招：巧用边框透明色(transparent)

CSS2.1将元素背景延伸到了边框，同时增加了transparent透明色。如果需要将已有的边框设置为暂时不可见，可使用“border-color:transparent;”，这时如同没有边框，看到的是背景色，需要边框可见时再设置相应的颜色，这样可以保证元素的区域不发生变化。这种方式与取消边框样式不同，取消边框样式时，虽然边框也不可见，但是这时边框的宽度为0，即元素的区域发生了变化。

1. 边框样式

　　边框样式用于定义页面中边框的风格，在CSS属性中，border-style属性用于设置边框样式，其常用属性值如下。

 ●none：没有边框即忽略所有边框的宽度（默认值）

●solid：边框为单实线

● dashed：边框为虚线

●dotted：边框为点线

●double：边框为双实线

　　例如，想要定义边框显示为双实线，可以书写以下代码样式：  

border-style:double;

　　在设置边框样式时，可以对盒子的单边进行设置，具体格式如下。

border-top-style:上边框样式;

border-right-style:右边框样式;

border-bottom-style:下边框样式;

border-left-style:左边框样式;

　　同时，为了避免代码过于冗余，也可以综合设置四条边的样式，具体格式如下。

border-style:上边框样式 右边框样式 下边框样式 左边框样式;

border-style:上边框样式 左右边框样式 下边框样式;

border-style:上下边框样式 左右边框样式;

border-style:上下左右边框样式;

　　观察上面的代码格式会发现，在综合设置边框样式时，其属性值可以设置1~4个。当设置4个属性值时，边框样式的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框样式会采用值复制的原则，将省略的属性值默认为某一边的样式。设置3个属性值时，为上、左右、下;设置2个属性值时，为上下和左右，设置1个属性值，为4边的公用样式。

2. 边框宽度

　　border-width属性用于设置边框的宽度，其常用取值单位为像素px。同边框样式一样，边框宽度也可以针对四条边分别设置，或综合设置四条边的宽度，具体如下。

border-top-width：上边框宽度;

border-right-width：右边框宽度;

border-bottom-width：下边框宽度;

border-left-width：左边框宽度;

border- width：上边框宽度 [右边框宽度 下边框宽度 左边框宽度];

　　综合设置四边宽度必须按上右下左的顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。

　　3. 设置边框颜色

　　border-color属性用于设置边框的颜色，其取值可为预定义的颜色英文单词(如red、blue)、十六进制颜色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括号里是颜色色值或百分比)，实际工作中最常用的是十六进制颜色值。

　　边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例如只包含图像的表格，其默认边框颜色为父元素的文本颜色。与边框样式和宽度相同，边框颜色的单边与综合设置方式如下。

border-top-color:上边框颜色;

border-right-color:右边框颜色;

border-bottom-color:下边框颜色;

border-left-color:左边框颜色;

border-color:上边框颜色 [右边框颜色 下边框颜色 左边框颜色];

综合设置四边颜色必须按顺时针顺序采用值复制原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。

　　例如设置段落的边框样式为实线，上下边灰色，左右边红色，代码如下。

p{

    border-style:solid;       /*综合设置边框样式*/

    border-color:#CCC #FF0000;   /*设置边框颜色：两个值为上下、左右*/

}

　　再如设置二级标题的边框样式为实线，且下边框为红色，其余边框采用默认文本的颜色，代码如下。

h2{

    border-style:solid;       /*综合设置边框样式*/

    border-bottom-color:red;    /*单独设置下边框颜色*/

}

　　注意：

　　1、设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效。

　　2、使用rgb模式设置颜色时，如果括号里面的数值为百分比，必须把“0”也加上百分号，写作“0%”。

　　4.综合设置边框

　　使用border-style、border-width、border-color虽然可以实现丰富的边框效果，但是这种方式书写的代码繁琐，且不便于阅读。其实CSS提供了更简单的边框设置方式，具体设置方式如下。

border-top:上边框宽度 样式 颜色;

border-right:右边框宽度 样式 颜色;

border-bottom:下边框宽度 样式 颜色;

border-left:左边框宽度 样式 颜色;

border:四边宽度 样式 颜色;

　　上面的设置方式中，边框的宽度、样式、颜色顺序任意，不分先后，可以只指定需要设置的属性，省略的部分将取默认值(样式不能省略)。

　　当每一侧的边框样式都不同，或者只需单独定义某一侧的边框样式时，可以使用单侧边框的综合设置样式属性border-top、border-bottom、border-left或border-right。例如单独定义段落的上边框，代码如下。

p{ border-top:2px solid #CCC;}   /*定义上边框，各个值顺序任意*/

　　该样式将段落的上边框设置为2像素、单实线、灰色，其他各边的边框按默认值不可见，这段代码等价于：

p{

    border-top-style:solid;

    border-top-width:2px;

    border-top-color:#CCC;

}

　　当四条边的边框样式都相同时，可以使用border属性进行综合设置。例如将二级标题的边框设置为双实线、红色、3像素宽，代码如下。

h2{border:3px double red;}

　　像border、border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。常用的复合属性有font、border、margin、padding和background等。实际工作中常使用复合属性，它可以简化代码，提高页面的运行速度，但是如果只设置一个属性值，最好不要应用复合属性，以免样式不被兼容。


猜你喜欢：

如何获取jQuery？通过代码演示jQuery的使用

编程中的Javascript能用来做什么?Javascript的发展历史

0 分享到：

javaee

python

web

design

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

Python

jdbc

北京校区

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

热门课程推荐

更多>>