顏色單位 盒模型 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;
}

效果：

原理：