颜色单位 盒模型 border

颜色单位：

盒子模型：
别名：方框属性、盒子属性、盒子模型
框模型主要设置了元素的 外边距、内边距、边框、高度、宽度、
元素实际宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
外边距：
1、什么是外边距
围绕在元素边框周围的空白区域页面会为元素增加额外的空白距离，外边距是透明的，位置在边框外
2、属性：
margin:
a.统一设置四个方向的外边距
margin:value;
margin:10px;
b.单方向设置
margin-left/right/top/bottom:value;

内边距：
1.什么是内边距：
内容区域与边框之间的控件
2.特点
元素一但设置了内边距后，会扩大整个元素区域
3.属性：
padding:value(上下左右)
padding:value(上下)(左右)
padding:value value value;
padding:value value value value;

padding-top/left/right/bottom;

边框border：(点击查看更多内容)

边框倒角：

边框阴影：

图片边框：

border:1px solid #fff;
solid:直线
dashed:虚线
double:双线
dotted:虚线；

div{
    width: 200px;
    height: 200px;
    background-color: greenyellow;
    border: 1px solid yellow;
    border-top-color: red;
    border-left-color: black;
    border-right-color: blue;
    border-bottom-color: gold;
    border-top-style: solid;
    border-bottom-style: double;
    border-left-style: dotted;
    border-right-style: dashed;
}

border写三角形

div{
    //宽高一定为0
    width: 0px;
    height: 0px;
    //solid 设置为透明色
    border: 100px solid transparent;
    //显示的一边为黑色
    border-left: 100px solid black;
}

效果：

原理：