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>
效果图：
css 只留四个边角的样式
原文地址：https://www.cnblogs.com/blhw/p/9765551.html