盒子模型
边框 border
边框颜色 border-color
属性 说明 举例
border-top-color 设置上边框的颜色 border-top-color:red;
border-right-color 设置右边框的颜色 border-right-color:blue;
border-bottom-color 设置下边框的颜色 border-bottom-color:green;
border-left-color 设置左边框的颜色 border-left-color:yellow;
同时设置4个边框为同一个颜色 border-color:red;
上下边框一个颜色 border-color: red blue;
左右边框一个颜色
上边框一个颜色
左右边框一个颜色 border-color: red blue yellow;
下边框一个颜色
同时 上,右,下,左 各一个颜色 border-color: red blue yellow green;
边框 粗细
border-
设置上边框的粗细 border-top-5px;
设置右边框的粗细 border-right-5px;
设置下边框的粗细 border-bottom-5px;
设置左边框的粗细 border-left-5px;
其他的与上面颜色写法一致 就是属性要看清楚 不要搞混了
边框的样式 ：
border-style:
-none -hidden -dotted -dashed -solid -double
设置上边框的样式 border-top-style:hidden;
设置右边框的样式 border-top-style:dashed;
设置下边框的样式 border-top-style:dotted;
设置左边框的样式 border-top-style:double;
其他的与上面颜色写法一致 就是属性要看清楚 不要搞混了
边框的组合写法:
同时设置边框的颜色 粗细 和样式
border: 1px solid red; 设置4个边框的 颜色 样式 粗细
border-top: 1px solid red; 针对上边框线 同时设置上边框线 样式 颜色 粗细
盒子模型之外补白:
margin:
------ margin-top 设置内容上面部分的补白
------ margin-left 设置内容左面部分的补白
------ margin-bottom 设置内容下面部分的补白
------ margin-right 设置内容右面部分的补白
margin : 5px; 设置 上右下左 四个地方的外补白