边框 - border

border用于设置盒子的边框

边框相对于content/padding/margin来说特殊一些

• 边框具备宽度width;
• 边框具备样式style;
• 边框具备颜色color;

设置边框的方式

边框宽度

• border-top-width、border-right-width、border-bottom-width、border-left-width;
• border-width是上面4个属性的简写属性;

边框颜色

• border-top-color、border-right-color、border-bottom-color、border-left-color;
• border-color是上面4个属性的简写属性;

边框样式

• border-top-style、border-right-style、border-bottom-style、border-left-style;
• border-style是上面4个属性的简写属性;

边框的样式设置值

边框的样式

• groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内;
• ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来;
  

同时设置的方式

对某一边同时设置 宽度 样式 颜色

• border-top;
• border-right;
• border-bottom;
• border-leftl
• border：统一设置4个方向的边框;

边框颜色、宽度、样式的编写顺序任意