css 只留四个边角的样式

css：
<style rel="stylesheet/scss" lang="scss" scoped>
div {
 position:relative;
 left:50px;
 top:50px;
 margin:10px;
 width:500px;
 height:100px;
 border:1px solid #E3581D;
}

span {
  position:absolute;
  padding:5px;
  border-style: solid;
  border-color: #E3581D;
}

.row1 {
  border-width: 5px 0 0 5px;
  top:-5px;
  left:-5px;
}

.row2 {
  border-width: 5px 5px 0 0;
  top:-5px;
  right:-5px;
}

.col1 {
  border-width: 0 0 5px 5px;
  bottom:-5px;
  left:-5px;
}

.col2 {
  border-width: 0 5px 5px 0;
  bottom:-5px;
  right:-5px;
}
</style>
 
 
html: 
　　<div>
 <span class="row row1"></span>
 <span class="row row2"></span>
 <span class="col col2"></span>
 <span class="col col1"></span>
 </div>
 
 
效果图：