CSS  设置边框属性
页面元素的边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框可以从三个方面来描述：宽度、样式和颜，这三个方面决定了边框所显示出来的外观。CSS中分别使用border-style、border-width和border-color这三个属性设定边框的三个方面。
1、border-style属性
border-style属性用于设定边框的样式，也就是风格。设定边框格式是边框最重要的部分，它主要用于为页面元素添加边框。CSS设定了9种边框样式，如表4-5所示。
表4-5  边框样式
属性值
描述
none
无边框，无论边框宽度设为多大
dotted
点线式边框
dashed
破折线式边框
solid
直线式边框
double
双线式边框
groove
槽线式边框
ridge
脊线式边框
inset
内嵌效果的边框
outset
突起效果的边框
在没有设定边框颜的情况下，groove、ridge、inset和outset边框默认的颜是灰。dotted、dashed、solid和double这四种边框的颜基于页面元素的color值。
其实，这几种边框样式还可以分别定义在一个边框中，从上边框开始按照顺时针的方向分别定义边框的上、右、下、左边框样式，从而形成多样式边框。
另外，如果需要单独的定义边框的一条边的样式，则可以使用如表4-6所列的属性来定义。
表4-6  各边样式属性
属性
描述
border-top-style
设定上边框的样式
border-right-style
设定右边框的样式
border-bottom-style
设定下边框的样式
border-left-style
html表格内外边框颜设定左边框的样式
2、border-width属性
在设定了边框的样式之后，就要根据需要来设定边框的宽度。border-width属性就是用来设定边框宽度，预设有三种属性值：medium、thin和thick，另外还可以自行设置宽度（width）。如表4-7所示。
表4-7  border-width属性
属性值
描述
medium
缺省值，中等宽度
thin
比medium细
thick
比medium粗
width
自定义宽度
border-width属性其实是border-top-width、border-right-width、border-bottom-width和border-left-width这四个属性的综合属性，分别用于设定上边框、右边框、下边框、左边框的宽度。
3、border-color属性
border-color属性用于设定边框的颜。除了使用border-color属性外，还可以使用如表4-8列出的属性单独为相应的边设定颜。
表4-8  各边颜属性
属性
描述
border-top-color
设定上边框的颜
border-right-color
设定右边框的颜
border-bottom-color
设定下边框的颜
border-left-color
设定左边框的颜
4、border属性
border属性集合了上述所介绍的三种属性，为页面元素设定边框的宽度、样式和颜。格式如下：
border: [border-width] [border-style] [boder-color]
其中，三个属性顺序可以自由调换。使用border属性的子属性可以分别为边框的四个边设定宽度、样式和颜。border属性如表4-9所示。
表4-9  border属性的子属性
属性
描述
border-top
设定上边框
border-right
设定右边框
border-bottom
设定下边框
border-left
设定左边框

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