css之边框

什么是边框？

边框就是环绕在标签宽度和高度周围的线条

1. 边框的属性格式
   连写（同时设置四条边的边框）
   border: 边框的宽度 边框的样式 边框的颜色
   连写（分别设置四条边的边框）

	border-top: 边框的宽度 边框的样式 边框的颜色;
	border-right: 边框的宽度 边框的样式 边框的颜色
	border-bottom: 边框的宽度 边框的样式 边框的颜色
	border-left: 边框的宽度 边框的样式 边框的颜色;

2. 我们可以用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;
}