边框border
border-width: 边框宽度
border-color: 边框颜色
border-style: 边框样式 solid(实线) double(双实线) dashed(虚线)
还可以分别设置四条边的border属性
border | 属性 |
---|---|
border-right- | width/style/color |
border-left- | width/style/color |
border-top- | width/style/color |
border-bottom- | width/style/color |
不同属性值个数设置
个数 | 设置(顺时针法) |
---|---|
4个值(例:border-width:20px 30px 38px 23px) | 4个值按 上——右——下——左(顺时针)设置 |
3个值(例:border-width:20px 30px 23px) | 3个值按 上——左右——下 |
2个值(例:border-width:20px 30px ) | 2个值按 上下——左右 |
1个值(例:border-width:20px ) | 1个值 四条边同时设置 |
外边距margin 和内边距padding
padding | margin |
---|---|
padding-left | margin-left |
padding-right | margin-right |
padding-top | margin-top |
padding-bottom | margin-botto |
属性值个数不同时
个数 | 设置(顺时针法) |
---|---|
4个值(例:padding:20px 30px 38px 23px) | 4个值按 上——右——下——左(顺时针)设置 |
3个值(例:padding:20px 30px 23px) | 3个值按 上——左右——下 |
2个值(例:padding:20px 30px ) | 2个值按 上下——左右 |
1个值(例:padding:20px ) | 1个值 四个值同时设置 |
盒子水平居中(前提设置盒子宽高)
margin:0 auto;
border-radius:设置盒子圆角 对应顺序:左上—右上—右下—左下
应用:
- 画圆形
盒子长宽相同时(正方形),设置radius值为盒子长宽的一半就变为圆形
div{
border: 1px solid red;
width: 100px;
height: 100px;
border-radius: 50px;
}
</style>
- 画扇形
盒子长宽相同时(正方形),设置radius一个值等于盒子长宽其余三个值为0就变为扇形
<style>
div{
border: 1px solid red;
width: 100px;
height: 100px;
border-radius: 100px 0 0 0;
}
</style>
画三角形
<style>
div{
border: 30px solid red;
width: 0px;
height: 0px;
border-color: green transparent transparent transparent;
}
</style>
transparent:透明