盒子边框(border)
- 边框(border)有三个属性:
属性 | 作用 |
---|---|
border-width | 设置边框粗细,单位是px |
border-style | 设置边框的样式 |
border-color | 设置边框颜色 |
- 常见的边框样式(border-style)有:
- none:没有边框即忽略所有边框的宽度(默认值)
- solid:边框为单实线(最为常用的)
- dashed:边框为虚线
- dotted:边框为点线
边框的综合设置
border : border-width || border-style || border-color
/*没有顺序*/
例如:
border: 1px solid red;
上述例子设置了边框样式宽度为 1 像素,实线,红色。
给单条边框设置样式
给单条边框设置样式的写法如下表:
上边框 | 下边框 | 左边框 | 右边框 |
---|---|---|---|
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
合并表格中两个单元格的边框——“细线边框”
即使设置了cellspacing="0"
,将表格单元格与单元格之间的距离设定为0。但是,由于两个单元格之间的边框会出现重叠,边框看起来还是会很粗。像这样:
设置CSS样式 border-collapse:collapse;
可以合并表格中相邻两个单元格的边框,呈现表格的细线边框。例如:
<style>
table,
td{
border:1px solid black;
border-collapse:collapse
}
</style>
效果图为: