一、什么是盒子模型
css盒子模型又称为框模型，盒子的最内部是元素的实际内容即元素内容，紧挨着元素框外部的是内边距，其次是边框，然后最外层是外边距，这几部分共同组成了盒子模型。
二、边框border-color
属性 |
说明 |
示例 |
border-top-color |
上边框颜色 |
border-top-color:#369; |
border-right-color |
右边框颜色 |
border-right-color:#369; |
border-bottom-color |
下边框颜色 |
border-bottom-color:#fae45b; |
border-left-color |
左边框颜色 |
border-left-color:#efcd56; |
border-coor |
四个边框为同一颜色 |
border-color:#eeff34; |
上、下边框颜色：#369 左、右边框颜色：#000 |
border-color:#369 #000; |
|
上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 |
border-color:#369 #000 #f00; |
|
上、右、下、左边框颜色： #369、#000、#f00、#00f |
border-color:#369 #000 #f00 #00f; |
三、边框粗细border-width
1. border-top-width:5px; 2. border-right-width:10px; 3. border-bottom-width:8px; 4. border-left-width:22px; 5. border-width:5px ; 6. border-width:20px 2px; 7. border-width:5px 1px 6px; 8. border-width:1px 3px 5px 2px;
四、边框样式border-style
1. border-top-style:solid; 2. border-right-style:solid; 3. border-bottom-style:solid; 4. border-left-style:solid; 5. border-style:solid ; 6. border-style:solid dotted; 7. border-style:solid dotted dashed; 8. border-style:solid dotted dashed double;
五、外边距margin
1. margin-top: 1 px 2. margin-right : 2 px 3. margin-bottom : 2 px 4. margin-left : 1 px 5. margin :3px 5px 7px 4px; 6. margin :3px 5px; 7. margin :3px 5px 7px; 8. margin :8px;
六、内边距padding
1. padding-left:10px; 2. padding-right: 5px; 3. padding-top: 20px; 4. padding-bottom:8px; 5. padding:20px 5px 8px 10px ; 6. padding:10px 5px; 7. padding:30px 8px 10px ; 8. padding:10px;
七、圆角边框
四个属性值按顺时针排列:
border-radius: 20px 10px 50px 30px;
八、圆形
利用border-radius属性制作圆形的两个要点，元素的宽度和高度必须相同，圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%。
1. div{ 2. width: 100px; 3. height: 100px; 4. border: 4px solid red; 5. border-radius: 50%; 6. }
九、盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)