css实现包边矩形

前言

如题，数据可视化项目需要对部分框进行包边，可以进行简单的切图，也可以使用css去实现，切图就不说了（专业切图仔）

<div class="box">
	<i class="column top left"></i>
	<i class="column top right"></i>
	<i class="column bottom left"></i>
	<i class="column bottom right"></i>
	<i class="row top left"></i>
	<i class="row top right"></i>
	<i class="row bottom left"></i>
	<i class="row bottom right"></i>
</div>

.box{
	width: 200px;
	height: 200px;
	border: 1px solid #333;
	margin: 100px;
	position: relative;
}
.column{
	width: 3px;
	height: 20px;
	position: absolute;
	display: inline-block;
	background-color: #333;
}
.row{
	width: 20px;
	height: 3px;
	position: absolute;
	display: inline-block;
	background-color: #333;
}
.top{
	top:-2px
}
.left{
	left:-2px
}
.right{
	right:-2px
}
.bottom{
	bottom:-2px
}