盒模型——内边距 padding
| 属性 | 描述 |
|---|---|
| padding | 设置所有内边距 |
| padding-left | 设置左内边距 |
| padding-right | 设置右内边距 |
| padding-top | 设置上内边距 |
| padding-bottom | 设置底部内边距 |
盒模型——边框
| 描述 | 属性 |
|---|---|
| 边框样式 | border-style |
| 单边框样式（上） | border-top-style |
| 边框颜色 | border-color |
| 单边框颜色（上） | border-top-color |
| 边框宽度 | border-width |
| 单边框宽度（上） | border-top-width |
CSS新增属性
| 描述 | 属性 |
|---|---|
| 圆角边框 | border-radius |
| 阴影效果 | box-shadow |
| 边框图片 | border-image |
<!--HTML-->
<body>
<p id="p1">Hello World!</p>
<br><br>
<div id="div1"></div>
</body>
<!--CSS-->
#p1{
border-radius:30px;
width:150px;
background-color:#ccccff;
border:2px solid #ccbbaa;
}
#div1{
width:150px;
height:150px;
background:#abcdef;
box-shadow:10px 10px 5px #fcdddd; /*前两个为偏移量 清晰度 颜色*/
}
外边距合并
不会叠加，而是 以多的一方为边距的长度
