分割页面中不同的盒子，常常需要给元素设置边框。在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性(border-width)、边框颜属性(border-color)、单侧边框的属性、边框的综合属性，如表1所示。
表1CSS边框属性
  仅通过表1的简单解释，初学者可能很难理解边框属性的应用技巧，们将详细讲解边框属性。
  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:上边框颜[右边框颜下边框颜左边框颜];
综合设置四边颜必须按顺时针顺序采用值复制原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
margin属性怎么用  例如设置段落的边框样式为实线，上下边灰，左右边红，代码如下。
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:2pxsolid#CCC;}/*定义上边框，各个值顺序任意*/
  该样式将段落的上边框设置为2像素、单实线、灰，其他各边的边框按默认值不可见，这段代码等价于：
p{
border-top-style:solid;
border-top-width:2px;
border-top-color:#CCC;
}
  当四条边的边框样式都相同时，可以使用border属性进行综合设置。例如将二级标题的边框设置为双实线、红、3像素宽，代码如下。
h2{border:3pxdoublered;}
  像border、border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。常用的复合属性有font、border、margin、paing和background等。实际工作中常使用复合属性，它可以简化代码，提高页面的运行速度，但如果只设置一个属性值，不要应用复合属性，以免样式不被兼容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。