CSS属性--盒子模型--border属性

border  表示盒子的边框

分为四个方向： top---上面   right---右面   bottom---下面    left---左面

取值方式：border-top   border-right   border-bottom    border-left 

每个边都包含三种属性：color---颜色    width---粗细    style---样式

写法如：border-top-color:red            设置上边框颜色为红色

              border-top-width:10px         设置上边框框线为10px宽

              border-top-style:solid           设置上边框框线为实线

常用框线属性有：solid---实线             dashed---虚线                dotted---点线                   double---双线

                                               inset---内嵌3D线           outset---外嵌3D线

简写的三种形式：

·按方向简写：

border-方向:width style color

·按样式简写:

border-color                         border-width                           border-style

原则上写四个值，分别表示上右下左（按顺时针方向表示）方向

仅有一个值时表示四个边设置相同的属性

有两个值时，表示的是上边和左边（顺时针方向表示），未设值的下边和上边数值相同，未设值的左边和右边数值相同

有三个值时，表示的是上边、右边、下边（顺时针方向表示），未设值的左边和右边数值相同

·终极简写方式

border:粗细 样式 颜色            同时对四条边设置相同的属性（空格隔开）

 

padding---内边框距离

表示盒子里的内容与边框之间的距离

同样也分为四个方向，也可以简写

原则上写四个值，分别表示上右下左（按顺时针方向表示）方向

仅有一个值时表示四个边设置相同的属性

有两个值时，表示的是上边和左边（顺时针方向表示），未设值的下边和上边数值相同，未设值的左边和右边数值相同

有三个值时，表示的是上边、右边、下边（顺时针方向表示），未设值的左边和右边数值相同

ps：当上下边冲突时以上边为准，左右冲突时以左为准

magin----外边框距离

表示盒子与盒子之间的距离 用法和padding（内边距）相同