盒子模型详解

盒子模型的包括：border（边框）、padding（内边距）、margin（外边距）、content（内容）

边框

border-top-color 上边框颜色 border-top-color:#369;

border-right-color 右边框颜色 border-right-color:#369;

border-bottom-color 下边框颜色 border-bottom-color:#fae45b;

border-left-color 左边框颜色 border-left-color:#efcd56;

border-color 四个边框为同一颜色 border-color:#eeff34;

上、下边框颜色：#369

左、右边框颜色：#000 border-color:#369 #000;

上边框颜色：#369

左、右边框颜色：#000

下边框颜色：#f00 border-color:#369 #000 #f00;

上、右、下、左边框颜色：

#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;

边框粗细

border-width

thin

medium

thick

像素值

示例如下:

border-top-width:5px;

border-right-width:10px;

border-bottom-width:8px;

border-left-width:22px;

border-width:5px ;

border-width:20px 2px;

border-width:5px 1px 6px;

border-width:1px 3px 5px 2px;

边框样式

border-style

none

hidden

dotted

dashed

solid

double

示例

border-top-style:solid;

border-right-style:solid;

border-bottom-style:solid;

border-left-style:solid;

border-style:solid ;

border-style:solid dotted;

border-style:solid dotted dashed;

border-style:solid dotted dashed double;

border简写

同时设置边框的颜色、粗细和样式

border:1px solid #3a6587;

border: 1px dashed red;