css - 盒子模型border

border-width：

设置边框上下左右宽度 border-width: 10px;

设置边框上下，左右宽度 border-width: 10px 20px;

设置边框上，下，左，右宽度 border-width: 10px 10px 20px 20px;

 

border-style：

设置边框上下左右类型 border-style: 属性

设置边框上下，左右类型 border-style: 属性 属性

设置边框上，下，左，右类型 border-style: 属性 属性 属性 属性

none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。

 

border-color：

设置边框上下左右颜色 border-color: 颜色

设置边框上下，左右颜色 border-color: 颜色 颜色

设置边框上，下，左，右颜色 border-color: 颜色 颜色 颜色 颜色

 

复合写法：

border：宽度 类型 颜色；

 

边框是否占据额外的空间：

默认情况下，元素的宽度和高度是这样计算的：

• width + padding + border = 元素的实际宽度
• height + padding + border = 元素的实际高度

box-sizing: content-box;

content-box	宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。