一.邊框樣式：
1.border-color:邊框顏色
1.1 border-top-color：上線顏色
1.2 border-bottom-color：下線顏色
.................................
1.3 border-color:顏色1 所有邊框
1.4 border-color:顏色1 顏色2 上下為顏色1 左右為顏色2
1.5 border-color:顏色1 顏色2 顏色3 上為顏色1 左右為顏色2 下為顏色3
1.6 border-color:顏色1 顏色2 顏色3 顏色4 上右下左
2.border-width：指定的是邊框的粗細
2.1 thin細
2.2 medium中等
2.3 thick粗
2.4 像素xxxpx
3.border-style：指定邊框風格
3.1 none：默認
3.2 hidden：隱藏
3.3 dotted：圓點
3.4 dashed：虛線
3.5 solid：實線
3.6 double：雙實線
4.border: 邊框線寬度 顏色 邊框風格
4.1 border:1px purple solid;
二.外邊距
margin：外邊距，盒子與盒子
margin-top：上外邊距
margin-right：下外邊距
margin-bottom
margin-left
margin:0px auto; 網頁居中對齊的必要條件 1.塊元素 2.固定寬度
三.內邊距
padding：內邊距，內容與盒子
padding-left ：左內邊距
padding-right
padding-top
padding-bottom
padding：位置1 位置2 上下為位置一 左右為位置二
四.盒子模型尺寸
盒子模型總尺寸=border+padding+margin+內容寬度
box-sizing：content-box | border-box | inherit;
content-box:默認值，盒子的寬度或者高度=border+padding+(margin)+width/height
border-box:盒子的寬度或者高度等於元素內容的寬度或者高度
inherit：元素集成父元素的盒子模型模式
五.圓角
border-radius：圓角
border-radius：20px 10px 50px 30px; 四個屬性值按順時針排列

1.原形：
border-radius: 50%; 寬度和高度相同
2.半圓：
border-radius: 150px 150px 0px 0px; 兩個角變，兩個角不變，按照順序，上半圓和下半圓寬度是高度的二倍，左半圓和右半圓高度是寬度的二倍
3.四分之一圓：
border-radius: 0px 0px 150px 0px; 一個角變，按照順序，寬度和高度相同
六.盒子陰影
box-shadow:10px 10px 30px yellow;
inset：內陰影

盒子模型的解析