作业帮css基础教程:详细介绍CSS的边框属性
来源：学生作业帮助网 编辑：作业帮 时间：2024/11/14 15:05:19 CSS
css基础教程:详细介绍CSS的边框属性CSS
【51Test.NET-css基础教程:详细介绍CSS的边框属性】：
我们本文来学习一下CSS的边框属性，这个在CSS里很重要，希望大家能够熟练掌握。边框是围绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的间隙是留给边框的，CSS可以用边框属性来定义它的样式、颜色和宽度等。 在Html中人们用表格来制作文本周围的边框，但通过CSS来设置边框将有更出色的效果，而且可以应用于所有的元素。
边框分为上边框、右边框、下边框、左边框。
每个边框有3个方面：样式（或外观）、颜色、以及其宽度（粗细），下面我们分别重点解释这三项。
设置元素所有边框的样式，或者单独地为各边设置边框样式。它有10个属性值，分别是：
其中groove、ridge、inset、outset有些像3D效果，它的效果受border-color的影响。
border-style作用在四个方向时所用的方法和前面曾讲过的padding属性的书写方法相同，如果它书写四个参数值，将按照上-右-下-左的顺序定义边框。如果只设置一个，将用于四个边框统一设置。如果设置两个值，第一个作用于上下，第二个则作用与左右。如果设置三个值，第一个作用于上边框，第二个作用于左右边框，第三个作用于下边框。
这个属性用来定义所有边框颜色，或者为四个边分别设置颜色。它可以取颜色的值或被设置为透明（transparent）。示例：
border-color属性值的个数与其所对应方向的边框效果的设置方法和border-style的设置方法相同，可参照border-style属性学习理解。
需要注意的是在border-color前最好先设置border-style，否则border-color可能会不显示。
border-width可定义四个边框的宽度，即边框的粗细程度，它有四个可选属性值：
border-width属性值设置的个数与所对应方向产生的效果和border-style、border-color的设置方法相同，可参照border-style、border-color属性学习理解。
border是一个综合性写法，它设置的是四个边框的宽度、样式和颜色，不能对某一个边框单独设置。它的格式：
示例：
除了以上介绍的几种属性，还有几种属性可以单独定义各方向的边框。下面对它们进行分类介绍。
设定上边框属性：
border-top，它的设置格式和border相同，依次设置宽度、样式、颜色：
border-top是将宽度、样式、颜色三种属性值放在一起设置的属性，如果要单独设置其中的任意一项也可以使用以下属性：border-top-width（单独设置上边框宽度）、border-style（单独设置上边框样式）、border-color（单独设置上边框颜色）。
示例：
以上的效果如果用border-top来设置的话更简单一些，代码如下：
设定右边框属性：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。 CSS
我们本文来学习一下CSS的边框属性，这个在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-color）
这个属性用来定义所有边框颜色，或者为四个边分别设置颜色。它可以取颜色的值或被设置为透明（transparent）。示例：
.colorful {border-style:solid;border-color:gray;}
border-color属性值的个数与其所对应方向的边框效果的设置方法和border-style的设置方法相同，可参照border-style属性学习理解。
需要注意的是在border-color前最好先设置border-style，否则border-color可能会不显示。
边框宽度（border-width）
border-width可定义四个边框的宽度，即边框的粗细程度，它有四个可选属性值：
- medium (是缺省值，通常大约是2像素)
- thin(比medium细)
- thick(比medium粗)
- 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者相对长度单位 (em, ex, px)。
border-width属性值设置的个数与所对应方向产生的效果和border-style、border-color的设置方法相同，可参照border-style、border-color属性学习理解。
边框（border）
border是一个综合性写法，它设置的是四个边框的宽度、样式和颜色，不能对某一个边框单独设置。它的格式：
border: border-width border-style border-color;
示例：
.bk01 {border:3px solid #FF0000;}
单边边框的设置方法
除了以上介绍的几种属性，还有几种属性可以单独定义各方向的边框。下面对它们进行分类介绍。
设定上边框属性：
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。 CSS