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>

 

 

效果图：

 

转载于:https://www.cnblogs.com/blhw/p/9765551.html