盒子模型的重要组成部分
Border (边框线)
div{
border:red 5px solid;
}
Border-radius (圆角)
设置圆的半径为15px
div{
width:100px;
height: 100px;
background-color: red;
border-radius: 15px;
}
可以看到盒子的边框已经发生改变
正圆-盒子
div{
width:100px;
height: 100px;
background-color: red;
border-radius: 50px;
}
胶囊-盒子
div{
width:200px;
height: 100px;
background-color: red;
border-radius: 50px;
}
同时给四个角赋值
div{
width:100px;
height: 100px;
background-color: red;
border-radius: 15px 25px 15px 30px;
}
每个角的像素都不同
Padding (内边距)
div{
padding:50px;
background-color: red;
}
Margin (边缘距离)
div{
width:400px;
height: 400px;
margin: 50px;
padding:50px;
background-color: red;
}
可以清楚的看到边缘距离是50
设置单方向线
div{
border-left:red 5px solid;
}