什么是边框?
边框就是环绕在标签宽度和高度周围的线条
- 边框的属性格式
连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色
连写(分别设置四条边的边框)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色
border-bottom: 边框的宽度 边框的样式 边框的颜色
border-left: 边框的宽度 边框的样式 边框的颜色;
- 我们可以用css边框实现各种图形
1)梯形
div{
width:100px;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
border-bottom:100px solid orange;
border-left:100px dashed transparent;
border-right:100px dashed transparent;
}
2)三角形
/*等腰三角形*/
div{
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
border-bottom:100px solid orange;
border-left:100px dashed transparent;
border-right:100px dashed transparent;
}
/*直角三角形*/
div{
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
border-bottom:100px solid orange;
border-left:100px dashed transparent;
}
3)对话框
.box{
width:300px;
padding:30px 20px;
border:5px solid #beceeb;
position:relative;
}
.box:after,.box:before{
content:'';
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
position:absolute;
}
.box:after{
border-top:20px solid #beceeb;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-20px;
z-index:1;
}
.box:before{
border-top:20px solid #ffffff;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-13px;
z-index:2;
}