盒子边框(border)

盒子边框.png

  1. 边框(border)有三个属性
属性 作用
border-width 设置边框粗细,单位是px
border-style 设置边框的样式
border-color 设置边框颜色
  1. 常见的边框样式(border-style)有:
  • none:没有边框即忽略所有边框的宽度(默认值)
  • solid:边框为单实线(最为常用的)
  • dashed:边框为虚线
  • dotted:边框为点线

边框的综合设置

  1. border : border-width || border-style || border-color
  2. /*没有顺序*/

例如:

 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。但是,由于两个单元格之间的边框会出现重叠,边框看起来还是会很粗。像这样:

表格边框.png

设置CSS样式 border-collapse:collapse; 可以合并表格中相邻两个单元格的边框,呈现表格的细线边框。例如:

<style>
    table,
    td{
    border:1px solid black;
        border-collapse:collapse
    }
</style>

效果图为:

边框合并.png